Skip to content

Commit

Permalink
docs update
Browse files Browse the repository at this point in the history
  • Loading branch information
@mzusin
mzusin committed Jul 14, 2023
1 parent 98885d9 commit bf2e1c1
Show file tree
Hide file tree
Showing 13 changed files with 364 additions and 47 deletions.
4 changes: 2 additions & 2 deletions README.md
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
# ミ☆ React Round Slider ミ☆
# Multi-Pointer React Round Slider ミ☆ミ

SVG and TypeScript React round slider library.
React Round Slider component based on SVG and TypeScript.



Expand Down
0 docs/css/styles.1689358044686.css → docs/css/styles.1689359339086.css
View file
File renamed without changes.
6 changes: 3 additions & 3 deletions docs/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,8 +16,8 @@
<link id="favicon-32" rel="icon" type="image/png" sizes="32x32" href="/img/favicon/favicon-32.png" />
<link id="favicon-16" rel="icon" type="image/png" sizes="16x16" href="/img/favicon/favicon-16.png" />

<link rel="stylesheet" href="/css/styles.1689358044686.css" />
<!--<link rel="stylesheet" href="/js/index.1689358044686.css" />-->
<link rel="stylesheet" href="/css/styles.1689359339086.css" />
<!--<link rel="stylesheet" href="/js/index.1689359339086.css" />-->

</head>
<body class="font-roboto bg-gray-900 text-gray-100" id="special-page">
Expand Down Expand Up @@ -93,6 +93,6 @@ <h1 class="text-slate-100 font-extrabold text-4xl sm:text-5xl lg:text-6xl tracki
</div>
</footer>-->

<script src="/js/index.1689358044686.js"></script>
<script src="/js/index.1689359339086.js"></script>
</body>
</html>
22 changes: 11 additions & 11 deletions docs/js/index.1689358044686.js → docs/js/index.1689359339086.js
View file

Large diffs are not rendered by default.

6 changes: 3 additions & 3 deletions docs/js/index.1689358044686.js.map → docs/js/index.1689359339086.js.map
View file

Large diffs are not rendered by default.

6 changes: 3 additions & 3 deletions docs/pages/basic-usage.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,8 +16,8 @@
<link id="favicon-32" rel="icon" type="image/png" sizes="32x32" href="/img/favicon/favicon-32.png" />
<link id="favicon-16" rel="icon" type="image/png" sizes="16x16" href="/img/favicon/favicon-16.png" />

<link rel="stylesheet" href="/css/styles.1689358044686.css" />
<!--<link rel="stylesheet" href="/js/index.1689358044686.css" />-->
<link rel="stylesheet" href="/css/styles.1689359339086.css" />
<!--<link rel="stylesheet" href="/js/index.1689359339086.css" />-->

</head>
<body class="h-screen flex flex-col font-roboto bg-white dark:bg-slate-900 dark:text-slate-100">
Expand Down Expand Up @@ -194,6 +194,6 @@
</div>
</footer>-->

<script src="/js/index.1689358044686.js"></script>
<script src="/js/index.1689359339086.js"></script>
</body>
</html>
55 changes: 52 additions & 3 deletions docs/pages/isettings-pointer-interface.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,8 +16,8 @@
<link id="favicon-32" rel="icon" type="image/png" sizes="32x32" href="/img/favicon/favicon-32.png" />
<link id="favicon-16" rel="icon" type="image/png" sizes="16x16" href="/img/favicon/favicon-16.png" />

<link rel="stylesheet" href="/css/styles.1689358044686.css" />
<!--<link rel="stylesheet" href="/js/index.1689358044686.css" />-->
<link rel="stylesheet" href="/css/styles.1689359339086.css" />
<!--<link rel="stylesheet" href="/js/index.1689359339086.css" />-->

</head>
<body class="h-screen flex flex-col font-roboto bg-white dark:bg-slate-900 dark:text-slate-100">
Expand Down Expand Up @@ -123,6 +123,10 @@
<div class="p-4 overflow-y-auto h-full md:w-100-350 dark:bg-slate-800">
<div class="w-800 max-w-full mx-auto my-10 leading-7 text-lg text-slate-800 dark:text-slate-200"><h1 class="text-3xl mb-8">ISettingsPointer Interface</h1>
<p class="mb-4">This interface represents the configuration options for the slider pointers:</p>
<br/>
<div id="pointer-options-slider"></div>
<br/>
<br/>
<pre class="hljs p-4 mb-4 rounded-md shadow-xl overflow-auto whitespace-pre-wrap text-base"><code><span class="hljs-keyword">export</span> <span class="hljs-keyword">interface</span> <span class="hljs-title class_">ISettingsPointer</span> {

<span class="hljs-comment">// The radius of the pointer in SVG units. </span>
Expand Down Expand Up @@ -164,6 +168,51 @@
<span class="hljs-comment">// Default value = undefined.</span>
ariaLabel?: <span class="hljs-built_in">string</span>;
}</code></pre>
<p class="mb-4">For example:</p>
<pre class="hljs p-4 mb-4 rounded-md shadow-xl overflow-auto whitespace-pre-wrap text-base"><code><span class="hljs-keyword">const</span> <span class="hljs-title function_">Component</span> = (<span class="hljs-params"></span>) =&gt; {

<span class="hljs-keyword">const</span> [ pointers, setPointers ] = useState&lt;<span class="hljs-title class_">ISettingsPointer</span>[]&gt;([
{
<span class="hljs-attr">value</span>: <span class="hljs-number">0</span>,
<span class="hljs-attr">radius</span>: <span class="hljs-number">25</span>,
<span class="hljs-attr">bgColor</span>: <span class="hljs-string">&#x27;#c20cff&#x27;</span>,
<span class="hljs-attr">bgColorSelected</span>: <span class="hljs-string">&#x27;#8e3da4&#x27;</span>,
<span class="hljs-attr">border</span>: <span class="hljs-number">1</span>,
<span class="hljs-attr">borderColor</span>: <span class="hljs-string">&#x27;#501062&#x27;</span>,
},
{
<span class="hljs-attr">value</span>: <span class="hljs-number">25</span>,
<span class="hljs-attr">radius</span>: <span class="hljs-number">20</span>,
<span class="hljs-attr">bgColor</span>: <span class="hljs-string">&#x27;#4be28c&#x27;</span>,
<span class="hljs-attr">bgColorSelected</span>: <span class="hljs-string">&#x27;#368c75&#x27;</span>,
<span class="hljs-attr">border</span>: <span class="hljs-number">1</span>,
<span class="hljs-attr">borderColor</span>: <span class="hljs-string">&#x27;#226452&#x27;</span>,
},
{
<span class="hljs-attr">value</span>: <span class="hljs-number">50</span>,
<span class="hljs-attr">radius</span>: <span class="hljs-number">15</span>,
<span class="hljs-attr">bgColor</span>: <span class="hljs-string">&#x27;#5691d5&#x27;</span>,
<span class="hljs-attr">bgColorSelected</span>: <span class="hljs-string">&#x27;#3173b4&#x27;</span>,
<span class="hljs-attr">border</span>: <span class="hljs-number">1</span>,
<span class="hljs-attr">borderColor</span>: <span class="hljs-string">&#x27;#18388a&#x27;</span>,
},
{
<span class="hljs-attr">value</span>: <span class="hljs-number">75</span>,
<span class="hljs-attr">radius</span>: <span class="hljs-number">10</span>,
<span class="hljs-attr">bgColor</span>: <span class="hljs-string">&#x27;#ffb800&#x27;</span>,
<span class="hljs-attr">bgColorSelected</span>: <span class="hljs-string">&#x27;#bd8802&#x27;</span>,
<span class="hljs-attr">border</span>: <span class="hljs-number">1</span>,
<span class="hljs-attr">borderColor</span>: <span class="hljs-string">&#x27;#775403&#x27;</span>,
}
]);

<span class="hljs-keyword">return</span> (
<span class="language-xml"><span class="hljs-tag">&lt;<span class="hljs-name">RoundSlider</span>
<span class="hljs-attr">pointers</span>=<span class="hljs-string">{</span> <span class="hljs-attr">pointers</span> }
<span class="hljs-attr">onChange</span>=<span class="hljs-string">{</span> <span class="hljs-attr">setPointers</span> }
/&gt;</span></span>
);
};</code></pre>
</div>

<div class="w-800 max-w-full mx-auto grid gap-8 items-center text-slate-500">
Expand Down Expand Up @@ -191,6 +240,6 @@
</div>
</footer>-->

<script src="/js/index.1689358044686.js"></script>
<script src="/js/index.1689359339086.js"></script>
</body>
</html>
2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
{
"name": "mz-react-round-slider",
"version": "1.0.0",
"description": "",
"description": "Multi-Pointer React Round Slider",
"type": "module",
"types": "./dist/index.d.ts",
"main": "./dist/mz-react-round-slider.min.js",
Expand Down
2 changes: 1 addition & 1 deletion src/core/ui/Pointer.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,7 @@ const getPointerFill = (
if(pointer.disabled) return bgColorDisabled;

if(document.activeElement === pointerRef.current) {
return bgColorSelected || bgColor;
return bgColorSelected;
}

return bgColor;
Expand Down
58 changes: 58 additions & 0 deletions src/docs/client-side/js/docs-examples/docs-examples.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,65 @@ const gettingStartedSlider = () => {
);
};

const pointerOptionsSlider = () => {
const $slider = document.getElementById('pointer-options-slider') as HTMLElement;
if(!$slider) return;

const Component = () => {

const [ pointers, setPointers ] = useState<ISettingsPointer[]>([
{
value: 0,
radius: 25,
bgColor: '#c20cff',
bgColorSelected: '#8e3da4',
border: 1,
borderColor: '#501062',
},
{
value: 25,
radius: 20,
bgColor: '#4be28c',
bgColorSelected: '#368c75',
border: 1,
borderColor: '#226452',
},
{
value: 50,
radius: 15,
bgColor: '#5691d5',
bgColorSelected: '#3173b4',
border: 1,
borderColor: '#18388a',
},
{
value: 75,
radius: 10,
bgColor: '#ffb800',
bgColorSelected: '#bd8802',
border: 1,
borderColor: '#775403',
}
]);

return (
<RoundSlider
pointers={ pointers }
onChange={ setPointers }
/>
);
};

const slider = ReactDOM.createRoot($slider);
slider.render(
<React.StrictMode>
<Component />
</React.StrictMode>
);
};

export const initDocsExamples = () => {

gettingStartedSlider();
pointerOptionsSlider();
};
54 changes: 54 additions & 0 deletions src/docs/data/pages/1-main/2-isettings-pointer-interface.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,11 @@

This interface represents the configuration options for the slider pointers:

<br/>
<div id="pointer-options-slider"></div>
<br/>
<br/>

```ts
export interface ISettingsPointer {

Expand Down Expand Up @@ -44,4 +49,53 @@ export interface ISettingsPointer {
// Default value = undefined.
ariaLabel?: string;
}
```

For example:

```tsx
const Component = () => {

const [ pointers, setPointers ] = useState<ISettingsPointer[]>([
{
value: 0,
radius: 25,
bgColor: '#c20cff',
bgColorSelected: '#8e3da4',
border: 1,
borderColor: '#501062',
},
{
value: 25,
radius: 20,
bgColor: '#4be28c',
bgColorSelected: '#368c75',
border: 1,
borderColor: '#226452',
},
{
value: 50,
radius: 15,
bgColor: '#5691d5',
bgColorSelected: '#3173b4',
border: 1,
borderColor: '#18388a',
},
{
value: 75,
radius: 10,
bgColor: '#ffb800',
bgColorSelected: '#bd8802',
border: 1,
borderColor: '#775403',
}
]);

return (
<RoundSlider
pointers={ pointers }
onChange={ setPointers }
/>
);
};
```
188 changes: 172 additions & 16 deletions test/browser/example.min.js
View file

Large diffs are not rendered by default.

8 changes: 4 additions & 4 deletions test/browser/example.min.js.map
View file

Large diffs are not rendered by default.

0 comments on commit bf2e1c1

Please sign in to comment.