From 30bbe405e60c72dfeebecd64884cd04bfcd55e5c Mon Sep 17 00:00:00 2001 From: Anish Aggarwal Date: Thu, 13 Aug 2020 15:30:39 +0530 Subject: [PATCH 1/4] [Playground] EuiRange, EuiDualRange --- src-docs/src/views/range/playground.js | 106 ++++++++++++++++++++++ src-docs/src/views/range/range_example.js | 3 + 2 files changed, 109 insertions(+) create mode 100644 src-docs/src/views/range/playground.js diff --git a/src-docs/src/views/range/playground.js b/src-docs/src/views/range/playground.js new file mode 100644 index 00000000000..0f99d8094d4 --- /dev/null +++ b/src-docs/src/views/range/playground.js @@ -0,0 +1,106 @@ +import { PropTypes } from 'react-view'; +import { EuiRange, EuiDualRange } from '../../../../src/components/'; +import { + propUtilityForPlayground, + dummyFunction, +} from '../../services/playground'; + +export const rangeConfig = () => { + const docgenInfo = Array.isArray(EuiRange.__docgenInfo) + ? EuiRange.__docgenInfo[0] + : EuiRange.__docgenInfo; + const propsToUse = propUtilityForPlayground(docgenInfo.props); + + propsToUse.value = { + ...propsToUse.value, + type: PropTypes.String, + }; + + propsToUse.onChange = { + ...propsToUse.onChange, + type: PropTypes.Custom, + value: undefined, + custom: { + ...propsToUse.onChange.custom, + use: 'switch', + label: 'Simulate', + }, + }; + + propsToUse.showInput = { + ...propsToUse.showInput, + type: PropTypes.Boolean, + }; + propsToUse.valueAppend = { + ...propsToUse.valueAppend, + type: PropTypes.String, + }; + propsToUse.valuePrepend = { + ...propsToUse.valuePrepend, + type: PropTypes.String, + }; + + return { + config: { + componentName: 'EuiRange', + props: propsToUse, + scope: { + EuiRange, + }, + imports: { + '@elastic/eui': { + named: ['EuiRange'], + }, + }, + customProps: { + onChange: dummyFunction, + }, + }, + }; +}; + +export const dualRangeConfig = () => { + const docgenInfo = Array.isArray(EuiDualRange.__docgenInfo) + ? EuiDualRange.__docgenInfo[0] + : EuiDualRange.__docgenInfo; + const propsToUse = propUtilityForPlayground(docgenInfo.props); + + propsToUse.value = { + ...propsToUse.value, + type: PropTypes.String, + }; + + propsToUse.onChange = { + ...propsToUse.onChange, + type: PropTypes.Custom, + value: undefined, + custom: { + ...propsToUse.onChange.custom, + use: 'switch', + label: 'Simulate', + }, + }; + + propsToUse.showInput = { + ...propsToUse.showInput, + type: PropTypes.Boolean, + }; + + return { + config: { + componentName: 'EuiDualRange', + props: propsToUse, + scope: { + EuiDualRange, + }, + imports: { + '@elastic/eui': { + named: ['EuiDualRange'], + }, + }, + customProps: { + onChange: dummyFunction, + }, + }, + }; +}; diff --git a/src-docs/src/views/range/range_example.js b/src-docs/src/views/range/range_example.js index 6949c8a54a2..59074a30a07 100644 --- a/src-docs/src/views/range/range_example.js +++ b/src-docs/src/views/range/range_example.js @@ -12,6 +12,8 @@ import { EuiCode, } from '../../../../src/components'; +import { rangeConfig, dualRangeConfig } from './playground'; + import { EuiRangeLevels, LEVEL_COLORS, @@ -424,4 +426,5 @@ export const RangeControlExample = { ], }, ], + playground: [rangeConfig, dualRangeConfig], }; From fa975fd2392c291150d664bb0c1e817f2a9dd34e Mon Sep 17 00:00:00 2001 From: Anish Aggarwal Date: Thu, 20 Aug 2020 00:28:51 +0530 Subject: [PATCH 2/4] fixed showInput default value --- src-docs/src/views/range/playground.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src-docs/src/views/range/playground.js b/src-docs/src/views/range/playground.js index 0f99d8094d4..a47ada3475f 100644 --- a/src-docs/src/views/range/playground.js +++ b/src-docs/src/views/range/playground.js @@ -30,6 +30,7 @@ export const rangeConfig = () => { propsToUse.showInput = { ...propsToUse.showInput, type: PropTypes.Boolean, + value: false, }; propsToUse.valueAppend = { ...propsToUse.valueAppend, @@ -84,6 +85,7 @@ export const dualRangeConfig = () => { propsToUse.showInput = { ...propsToUse.showInput, type: PropTypes.Boolean, + value: false, }; return { From 70c72402049dbd4d3c5c13892d6c6e9ad0c2b06a Mon Sep 17 00:00:00 2001 From: Anish Aggarwal Date: Thu, 20 Aug 2020 14:58:31 +0530 Subject: [PATCH 3/4] added value --- src-docs/src/views/range/playground.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src-docs/src/views/range/playground.js b/src-docs/src/views/range/playground.js index a47ada3475f..7f6f9b6ec46 100644 --- a/src-docs/src/views/range/playground.js +++ b/src-docs/src/views/range/playground.js @@ -14,6 +14,7 @@ export const rangeConfig = () => { propsToUse.value = { ...propsToUse.value, type: PropTypes.String, + value: '10', }; propsToUse.onChange = { @@ -69,6 +70,7 @@ export const dualRangeConfig = () => { propsToUse.value = { ...propsToUse.value, type: PropTypes.String, + value: '10', }; propsToUse.onChange = { From 120d1993630e4c0e4c16ac4ec5d6877928017c8c Mon Sep 17 00:00:00 2001 From: Anish Aggarwal Date: Fri, 21 Aug 2020 03:43:52 +0530 Subject: [PATCH 4/4] added warning for tickInterval --- src-docs/src/views/range/playground.js | 26 ++++++++++++++++++++++++++ 1 file changed, 26 insertions(+) diff --git a/src-docs/src/views/range/playground.js b/src-docs/src/views/range/playground.js index 7f6f9b6ec46..9cdd3b899e4 100644 --- a/src-docs/src/views/range/playground.js +++ b/src-docs/src/views/range/playground.js @@ -28,6 +28,19 @@ export const rangeConfig = () => { }, }; + propsToUse.tickInterval = { + ...propsToUse.tickInterval, + custom: { + ...propsToUse.tickInterval.custom, + checkDep: (val, state) => { + if (state.showTicks.value && !val) { + return 'When passing showTicks to EuiDualRange, you must also provide tickInterval'; + } + return undefined; + }, + }, + }; + propsToUse.showInput = { ...propsToUse.showInput, type: PropTypes.Boolean, @@ -90,6 +103,19 @@ export const dualRangeConfig = () => { value: false, }; + propsToUse.tickInterval = { + ...propsToUse.tickInterval, + custom: { + ...propsToUse.tickInterval.custom, + checkDep: (val, state) => { + if (state.showTicks.value && !val) { + return 'When passing showTicks to EuiRange, you must also provide tickInterval'; + } + return undefined; + }, + }, + }; + return { config: { componentName: 'EuiDualRange',