From 8a50e14410175d7bf71c208c14bdbb18ef797a41 Mon Sep 17 00:00:00 2001 From: Sasha Khamkov Date: Thu, 19 Sep 2019 22:34:13 +0300 Subject: [PATCH] DOCS (updates): add anchors to examples --- README.md | 1 + docs/src/examples/AccessDataByPath.js | 27 ++++++------- docs/src/examples/Basic.js | 13 +++---- docs/src/examples/CreateEntries.js | 11 +++--- docs/src/examples/CustomContentAndDropdown.js | 13 +++---- docs/src/examples/DropdownAutoPosition.js | 18 +++++---- docs/src/examples/ExternalClear.js | 13 +++---- docs/src/examples/ItemRenderer.js | 12 +++--- docs/src/examples/Multi.js | 13 +++---- docs/src/examples/NoData.js | 20 +++------- docs/src/examples/OpenOnTop.js | 21 +++------- docs/src/examples/RenderInBody.js | 21 +++------- docs/src/examples/Rtl.js | 21 +++------- docs/src/examples/Styled.js | 29 +++++++------- docs/src/examples/Windowed.js | 12 +++--- docs/src/examples/components/Heading.js | 38 +++++++++++++++++++ docs/src/pages/api.md | 1 + 17 files changed, 138 insertions(+), 146 deletions(-) create mode 100644 docs/src/examples/components/Heading.js diff --git a/README.md b/README.md index 6ecec9d1..b2a17c7f 100644 --- a/README.md +++ b/README.md @@ -96,6 +96,7 @@ and use as: | create | bool | false | If true, select will create value from search string and fire `onCreateNew` callback prop | | createNewLabel | string | "add {search}" | If create set to true, this will be the label of the "add new" component. `{search}` will be replaced by search value | | disabledLabel | string | "disabled" | Label shown on disabled field (after) the text | +| additionalProps | object | null | Additional props to pass to Select | ### Callback props diff --git a/docs/src/examples/AccessDataByPath.js b/docs/src/examples/AccessDataByPath.js index 5fcffbbd..1a8e08ac 100644 --- a/docs/src/examples/AccessDataByPath.js +++ b/docs/src/examples/AccessDataByPath.js @@ -1,18 +1,21 @@ import React from 'react'; -import styled from '@emotion/styled'; - import Select from '../../../src'; import { options } from '../options'; +import { Heading } from './components/Heading'; const AccessDataByPath = ({ title }) => ( - - <h2>{title}</h2> - <a href="https://github.com/sanusart/react-dropdown-select/tree/master/docs/src/examples/AccessDataByPath.js"> - Source - </a> - -

"Label" is accessed via company.catchPhrase nested property of the options object

+ +

+ "Label" is accessed via company.catchPhrase nested property of the{' '} + + options + {' '} + object +

( - - <h2>{title}</h2> - <a href="https://github.com/sanusart/react-dropdown-select/tree/master/docs/src/examples/CreateEntries.js"> - Source - </a> - +

Type search and hit `Return` key

- - <h2>{title}</h2> - <a href="https://github.com/sanusart/react-dropdown-select/tree/master/docs/src/examples/ExternalClear.js"> - Source - </a> - + +

I can be cleared from outside by setting values to []

Values can be added from outside

( - - <h2>{title}</h2> - <a href="https://github.com/sanusart/react-dropdown-select/tree/master/docs/src/examples/Multi.js"> - Source - </a> - + + ( - - <h2>{title}</h2> - <a href="https://github.com/sanusart/react-dropdown-select/tree/master/docs/src/examples/OpenOnTop.js"> - Source - </a> - + + ( ); -Rtl.propTypes = {}; - -const Title = styled.div` - display: flex; - justify-content: space-between; - align-items: baseline; -`; - const StyledNoData = styled.div` padding: 10px; color: #555; diff --git a/docs/src/examples/Styled.js b/docs/src/examples/Styled.js index 4b608c2c..74468362 100644 --- a/docs/src/examples/Styled.js +++ b/docs/src/examples/Styled.js @@ -1,16 +1,15 @@ import React from 'react'; import styled from '@emotion/styled'; - +import { Heading } from './components/Heading'; import Select from '../../../src'; const Styled = ({ options, title }) => ( - - <h2>{title}</h2> - <a href="https://github.com/sanusart/react-dropdown-select/tree/master/docs/src/examples/Styled.js"> - Source - </a> - + + ( ); -Styled.propTypes = {}; - -const Title = styled.div` - display: flex; - justify-content: space-between; - align-items: baseline; -`; - const StyledSelect = styled(Select)` background: #333; border: #333 !important; @@ -72,14 +63,20 @@ const StyledSelect = styled(Select)` } .react-dropdown-select-item { - color: #fff; + color: #f2f2f2; border-bottom: 1px solid #333; + + :hover { + color: #ffffff80; + } } .react-dropdown-select-item.react-dropdown-select-item-selected, .react-dropdown-select-item.react-dropdown-select-item-active { //background: #111; border-bottom: 1px solid #333; + color: #fff; + font-weight: bold; } .react-dropdown-select-item.react-dropdown-select-item-disabled { diff --git a/docs/src/examples/Windowed.js b/docs/src/examples/Windowed.js index 2dea115c..4449697f 100644 --- a/docs/src/examples/Windowed.js +++ b/docs/src/examples/Windowed.js @@ -1,7 +1,7 @@ import React from 'react'; import styled from '@emotion/styled'; import { List, AutoSizer } from 'react-virtualized'; - +import { Heading } from './components/Heading'; import Select from '../../../src'; const itemData = Array.from(Array(20000).keys()).map((value) => ({ @@ -38,12 +38,10 @@ const customDropdownRenderer = ({ methods, state, props }) => { const Windowed = ({ title }) => ( - - <h2>{title}</h2> - <a href="https://github.com/sanusart/react-dropdown-select/tree/master/docs/src/examples/Windowed.js"> - Source - </a> - +

Using dropdownRenderer and diff --git a/docs/src/examples/components/Heading.js b/docs/src/examples/components/Heading.js new file mode 100644 index 00000000..bcadc7f3 --- /dev/null +++ b/docs/src/examples/components/Heading.js @@ -0,0 +1,38 @@ +import React, { useState } from 'react'; +import styled from '@emotion/styled'; +const anchorify = (title) => title.replace(/\s|,|\"|\'/gi, '-'); + +export const Heading = ({ title, source }) => { + const [anchorVisible, setAnchorVisible] = useState(false); + + return ( + + <h2 + id={anchorify(title)} + onMouseEnter={() => setAnchorVisible(!anchorVisible)} + onMouseLeave={() => setAnchorVisible(!anchorVisible)}> + <Anchor show={anchorVisible} href={`#${anchorify(title)}`}> + # + </Anchor>{' '} + {title} + </h2> + <a href={source}>Source</a> + + ); +}; + +const Anchor = styled.a` + visibility: ${({ show }) => (show ? 'visible' : 'hidden')}; + color: #bbb; + font-size: 20px; + font-weight: 300; + position: relative; + left: 0; + margin: 0 0 0 -19px; +`; + +const Title = styled.div` + display: flex; + justify-content: space-between; + align-items: baseline; +`; diff --git a/docs/src/pages/api.md b/docs/src/pages/api.md index a3e4e392..25e8ccfb 100644 --- a/docs/src/pages/api.md +++ b/docs/src/pages/api.md @@ -42,6 +42,7 @@ title: 'API' | create | bool | false | If true, select will create value from search string and fire `onCreateNew` callback prop | | createNewLabel | string | "add {search}" | If create set to true, this will be the label of the "add new" component. `{search}` will be replaced by search value | | disabledLabel | string | "disabled" | Label shown on disabled field (after) the text | +| additionalProps | object | null | Additional props to pass to Select | ## Callback props