mirror of
https://github.com/lowdefy/lowdefy.git
synced 2025-03-19 15:01:06 +08:00
feat(blocks-color-seletors): Replace color selectors with single color selector using react-colorful.
BREAKING CHANGE
This commit is contained in:
Gervwyk
parent
0f25b5768f
commit
78308908c4
@ -1,3 +1,3 @@
|
||||
# Lowdefy Color Selector
|
||||
|
||||
A Lowdefy Color Selector block based on react-color.
|
||||
A Lowdefy Color Selector block based on react-colorful.
|
||||
|
||||
@ -53,8 +53,9 @@
|
||||
"dependencies": {
|
||||
"@lowdefy/block-utils": "4.0.0-alpha.7",
|
||||
"@lowdefy/blocks-antd": "4.0.0-alpha.7",
|
||||
"classnames": "2.3.1",
|
||||
"react": "17.0.2",
|
||||
"react-color": "2.19.3",
|
||||
"react-colorful": "5.5.1",
|
||||
"react-dom": "17.0.2"
|
||||
},
|
||||
"devDependencies": {
|
||||
|
||||
@ -15,10 +15,3 @@
|
||||
*/
|
||||
|
||||
export { default as ColorSelector } from './blocks/ColorSelector/ColorSelector.js';
|
||||
export { default as ChromeColorSelector } from './blocks/ChromeColorSelector/ChromeColorSelector.js';
|
||||
export { default as CircleColorSelector } from './blocks/CircleColorSelector/CircleColorSelector.js';
|
||||
export { default as CompactColorSelector } from './blocks/CompactColorSelector/CompactColorSelector.js';
|
||||
export { default as GithubColorSelector } from './blocks/GithubColorSelector/GithubColorSelector.js';
|
||||
export { default as SliderColorSelector } from './blocks/SliderColorSelector/SliderColorSelector.js';
|
||||
export { default as SwatchesColorSelector } from './blocks/SwatchesColorSelector/SwatchesColorSelector.js';
|
||||
export { default as TwitterColorSelector } from './blocks/TwitterColorSelector/TwitterColorSelector.js';
|
||||
|
||||
@ -1,70 +0,0 @@
|
||||
/*
|
||||
Copyright 2020-2021 Lowdefy, Inc
|
||||
|
||||
Licensed under the Apache License, Version 2.0 (the "License");
|
||||
you may not use this file except in compliance with the License.
|
||||
You may obtain a copy of the License at
|
||||
|
||||
http://www.apache.org/licenses/LICENSE-2.0
|
||||
|
||||
Unless required by applicable law or agreed to in writing, software
|
||||
distributed under the License is distributed on an "AS IS" BASIS,
|
||||
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
See the License for the specific language governing permissions and
|
||||
limitations under the License.
|
||||
*/
|
||||
|
||||
import React, { useState } from 'react';
|
||||
import ChromePicker from 'react-color/lib/Chrome.js';
|
||||
import { blockDefaultProps } from '@lowdefy/block-utils';
|
||||
import Label from '@lowdefy/blocks-antd/blocks/Label/Label.js';
|
||||
|
||||
const Selector = ({ blockId, loading, methods, properties, required, validation, value }) => {
|
||||
const [color, setColor] = useState(value || properties.defaultColor || '#000000');
|
||||
return (
|
||||
<Label
|
||||
blockId={blockId}
|
||||
loading={loading}
|
||||
methods={methods}
|
||||
properties={{ title: properties.title, size: properties.size, ...properties.label }}
|
||||
required={required}
|
||||
validation={validation}
|
||||
content={{
|
||||
content: () => (
|
||||
<ChromePicker
|
||||
id={`${blockId}_input`}
|
||||
className={methods.makeCssClass([
|
||||
{ marginBottom: '0px !important' },
|
||||
properties.inputStyle,
|
||||
])}
|
||||
color={(color && color[color.source]) || color || '#000000'}
|
||||
disableAlpha={properties.disableAlpha}
|
||||
onChange={(clr) => setColor(clr)}
|
||||
onChangeComplete={(clr) => {
|
||||
setColor(clr);
|
||||
methods.setValue(clr);
|
||||
methods.triggerEvent({ name: 'onChange' });
|
||||
}}
|
||||
/>
|
||||
),
|
||||
}}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
Selector.defaultProps = blockDefaultProps;
|
||||
Selector.meta = {
|
||||
valueType: 'object',
|
||||
category: 'input',
|
||||
loading: {
|
||||
type: 'Skeleton',
|
||||
properties: {
|
||||
width: 225,
|
||||
height: 240,
|
||||
},
|
||||
},
|
||||
icons: [...Label.meta.icons],
|
||||
styles: ['blocks/ChromeColorSelector/style.less'],
|
||||
};
|
||||
|
||||
export default Selector;
|
||||
@ -1,50 +0,0 @@
|
||||
/*
|
||||
Copyright 2020-2021 Lowdefy, Inc
|
||||
|
||||
Licensed under the Apache License, Version 2.0 (the "License");
|
||||
you may not use this file except in compliance with the License.
|
||||
You may obtain a copy of the License at
|
||||
|
||||
http://www.apache.org/licenses/LICENSE-2.0
|
||||
|
||||
Unless required by applicable law or agreed to in writing, software
|
||||
distributed under the License is distributed on an "AS IS" BASIS,
|
||||
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
See the License for the specific language governing permissions and
|
||||
limitations under the License.
|
||||
*/
|
||||
import 'jest-canvas-mock';
|
||||
import { runMockRenderTests } from '@lowdefy/block-dev';
|
||||
|
||||
import Block from './ChromeColorSelector.js';
|
||||
import examples from './examples.yaml';
|
||||
import schema from './schema.json';
|
||||
|
||||
const testConfig = {
|
||||
validation: true,
|
||||
required: true,
|
||||
values: [],
|
||||
};
|
||||
|
||||
jest.mock('react-color', () => {
|
||||
const selectors = {
|
||||
ChromePicker: jest.fn(() => 'mocked'),
|
||||
};
|
||||
return selectors;
|
||||
});
|
||||
|
||||
const mocks = [
|
||||
{
|
||||
getMockFns: async () => {
|
||||
const antd = await import('react-color');
|
||||
return [antd.ChromePicker];
|
||||
},
|
||||
getBlock: async () => {
|
||||
const Block = await import('./ChromeColorSelector.js');
|
||||
return Block.default;
|
||||
},
|
||||
name: 'ChromeColorSelector',
|
||||
},
|
||||
];
|
||||
|
||||
runMockRenderTests({ Block, examples, mocks, schema, testConfig });
|
||||
@ -1,31 +0,0 @@
|
||||
/*
|
||||
Copyright 2020-2021 Lowdefy, Inc
|
||||
|
||||
Licensed under the Apache License, Version 2.0 (the "License");
|
||||
you may not use this file except in compliance with the License.
|
||||
You may obtain a copy of the License at
|
||||
|
||||
http://www.apache.org/licenses/LICENSE-2.0
|
||||
|
||||
Unless required by applicable law or agreed to in writing, software
|
||||
distributed under the License is distributed on an "AS IS" BASIS,
|
||||
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
See the License for the specific language governing permissions and
|
||||
limitations under the License.
|
||||
*/
|
||||
|
||||
import 'jest-canvas-mock';
|
||||
import { runBlockSchemaTests, runRenderTests } from '@lowdefy/block-dev';
|
||||
|
||||
import Block from './ChromeColorSelector.js';
|
||||
import examples from './examples.yaml';
|
||||
import schema from './schema.json';
|
||||
|
||||
const testConfig = {
|
||||
validation: true,
|
||||
required: true,
|
||||
values: [],
|
||||
};
|
||||
|
||||
runRenderTests({ Block, examples, schema, testConfig });
|
||||
runBlockSchemaTests({ examples, schema });
|
||||
@ -1,97 +0,0 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`Mock render - default - value[0] - ChromeColorSelector 1`] = `
|
||||
Array [
|
||||
Array [
|
||||
Object {
|
||||
"className": "{\\"style\\":[{\\"marginBottom\\":\\"0px !important\\"},null]}",
|
||||
"color": "#000000",
|
||||
"disableAlpha": undefined,
|
||||
"id": "default_input",
|
||||
"onChange": [Function],
|
||||
"onChangeComplete": [Function],
|
||||
},
|
||||
Object {},
|
||||
],
|
||||
]
|
||||
`;
|
||||
|
||||
exports[`Mock render - defaultColor - value[0] - ChromeColorSelector 1`] = `
|
||||
Array [
|
||||
Array [
|
||||
Object {
|
||||
"className": "{\\"style\\":[{\\"marginBottom\\":\\"0px !important\\"},null]}",
|
||||
"color": "#FF0000",
|
||||
"disableAlpha": undefined,
|
||||
"id": "defaultColor_input",
|
||||
"onChange": [Function],
|
||||
"onChangeComplete": [Function],
|
||||
},
|
||||
Object {},
|
||||
],
|
||||
]
|
||||
`;
|
||||
|
||||
exports[`Mock render - disableAlpha - value[0] - ChromeColorSelector 1`] = `
|
||||
Array [
|
||||
Array [
|
||||
Object {
|
||||
"className": "{\\"style\\":[{\\"marginBottom\\":\\"0px !important\\"},null]}",
|
||||
"color": "#000000",
|
||||
"disableAlpha": true,
|
||||
"id": "disableAlpha_input",
|
||||
"onChange": [Function],
|
||||
"onChangeComplete": [Function],
|
||||
},
|
||||
Object {},
|
||||
],
|
||||
]
|
||||
`;
|
||||
|
||||
exports[`Mock render - inputStyle - value[0] - ChromeColorSelector 1`] = `
|
||||
Array [
|
||||
Array [
|
||||
Object {
|
||||
"className": "{\\"style\\":[{\\"marginBottom\\":\\"0px !important\\"},{\\"border\\":\\"3px solid blue\\"}]}",
|
||||
"color": "#000000",
|
||||
"disableAlpha": undefined,
|
||||
"id": "inputStyle_input",
|
||||
"onChange": [Function],
|
||||
"onChangeComplete": [Function],
|
||||
},
|
||||
Object {},
|
||||
],
|
||||
]
|
||||
`;
|
||||
|
||||
exports[`Mock render - label-disabled - value[0] - ChromeColorSelector 1`] = `
|
||||
Array [
|
||||
Array [
|
||||
Object {
|
||||
"className": "{\\"style\\":[{\\"marginBottom\\":\\"0px !important\\"},null]}",
|
||||
"color": "#000000",
|
||||
"disableAlpha": undefined,
|
||||
"id": "label-disabled_input",
|
||||
"onChange": [Function],
|
||||
"onChangeComplete": [Function],
|
||||
},
|
||||
Object {},
|
||||
],
|
||||
]
|
||||
`;
|
||||
|
||||
exports[`Mock render - title - value[0] - ChromeColorSelector 1`] = `
|
||||
Array [
|
||||
Array [
|
||||
Object {
|
||||
"className": "{\\"style\\":[{\\"marginBottom\\":\\"0px !important\\"},null]}",
|
||||
"color": "#000000",
|
||||
"disableAlpha": undefined,
|
||||
"id": "title_input",
|
||||
"onChange": [Function],
|
||||
"onChangeComplete": [Function],
|
||||
},
|
||||
Object {},
|
||||
],
|
||||
]
|
||||
`;
|
||||
File diff suppressed because it is too large
Load Diff
@ -1,38 +0,0 @@
|
||||
# Copyright 2020-2021 Lowdefy, Inc
|
||||
|
||||
# Licensed under the Apache License, Version 2.0 (the "License");
|
||||
# you may not use this file except in compliance with the License.
|
||||
# You may obtain a copy of the License at
|
||||
|
||||
# http://www.apache.org/licenses/LICENSE-2.0
|
||||
|
||||
# Unless required by applicable law or agreed to in writing, software
|
||||
# distributed under the License is distributed on an "AS IS" BASIS,
|
||||
# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
# See the License for the specific language governing permissions and
|
||||
# limitations under the License.
|
||||
|
||||
- id: default
|
||||
type: ChromeColorSelector
|
||||
- id: title
|
||||
type: ChromeColorSelector
|
||||
properties:
|
||||
title: The color selector
|
||||
- id: disableAlpha
|
||||
type: ChromeColorSelector
|
||||
properties:
|
||||
disableAlpha: true
|
||||
- id: defaultColor
|
||||
type: ChromeColorSelector
|
||||
properties:
|
||||
defaultColor: '#FF0000'
|
||||
- id: inputStyle
|
||||
type: ChromeColorSelector
|
||||
properties:
|
||||
inputStyle:
|
||||
border: 3px solid blue
|
||||
- id: label-disabled
|
||||
type: ChromeColorSelector
|
||||
properties:
|
||||
label:
|
||||
disabled: true
|
||||
@ -1,99 +0,0 @@
|
||||
{
|
||||
"type": "object",
|
||||
"properties": {
|
||||
"type": "object",
|
||||
"properties": {
|
||||
"defaultColor": {
|
||||
"type": "string",
|
||||
"description": "Default color to display if input value is null.",
|
||||
"docs": {
|
||||
"displayType": "color"
|
||||
}
|
||||
},
|
||||
"disableAlpha": {
|
||||
"type": "boolean",
|
||||
"description": "Remove alpha slider and options from picker."
|
||||
},
|
||||
"inputStyle": {
|
||||
"type": "object",
|
||||
"description": "Css style to applied to input.",
|
||||
"docs": {
|
||||
"displayType": "yaml"
|
||||
}
|
||||
},
|
||||
"label": {
|
||||
"type": "object",
|
||||
"description": "Label properties.",
|
||||
"additionalProperties": false,
|
||||
"properties": {
|
||||
"align": {
|
||||
"type": "string",
|
||||
"enum": ["left", "right"],
|
||||
"default": "left",
|
||||
"description": "Align label left or right when inline."
|
||||
},
|
||||
"colon": {
|
||||
"type": "boolean",
|
||||
"default": true,
|
||||
"description": "Append label with colon."
|
||||
},
|
||||
"extra": {
|
||||
"type": "string",
|
||||
"description": "Extra text to display beneath the content."
|
||||
},
|
||||
"title": {
|
||||
"type": "string",
|
||||
"description": "Label title."
|
||||
},
|
||||
"span": {
|
||||
"type": "number",
|
||||
"description": "Label inline span."
|
||||
},
|
||||
"disabled": {
|
||||
"type": "boolean",
|
||||
"default": false,
|
||||
"description": "Hide input label."
|
||||
},
|
||||
"hasFeedback": {
|
||||
"type": "boolean",
|
||||
"default": true,
|
||||
"description": "Display feedback extra from validation, this does not disable validation."
|
||||
},
|
||||
"inline": {
|
||||
"type": "boolean",
|
||||
"default": false,
|
||||
"description": "Render input and label inline."
|
||||
},
|
||||
"extraStyle": {
|
||||
"type": "object",
|
||||
"description": "Css style to applied to label extra.",
|
||||
"docs": {
|
||||
"displayType": "yaml"
|
||||
}
|
||||
},
|
||||
"feedbackStyle": {
|
||||
"type": "object",
|
||||
"description": "Css style to applied to label feedback.",
|
||||
"docs": {
|
||||
"displayType": "yaml"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"title": {
|
||||
"type": "string",
|
||||
"description": "Title to describe the input component, if no title is specified the block id is displayed."
|
||||
}
|
||||
}
|
||||
},
|
||||
"events": {
|
||||
"type": "object",
|
||||
"additionalProperties": false,
|
||||
"properties": {
|
||||
"onChange": {
|
||||
"type": "array",
|
||||
"description": "Trigger actions when color is picked."
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,17 +0,0 @@
|
||||
/*
|
||||
Copyright 2020-2021 Lowdefy, Inc
|
||||
|
||||
Licensed under the Apache License, Version 2.0 (the "License");
|
||||
you may not use this file except in compliance with the License.
|
||||
You may obtain a copy of the License at
|
||||
|
||||
http://www.apache.org/licenses/LICENSE-2.0
|
||||
|
||||
Unless required by applicable law or agreed to in writing, software
|
||||
distributed under the License is distributed on an "AS IS" BASIS,
|
||||
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
See the License for the specific language governing permissions and
|
||||
limitations under the License.
|
||||
*/
|
||||
|
||||
@import '@lowdefy/blocks-antd/blocks/Label/style.less';
|
||||
@ -1,95 +0,0 @@
|
||||
/*
|
||||
Copyright 2020-2021 Lowdefy, Inc
|
||||
|
||||
Licensed under the Apache License, Version 2.0 (the "License");
|
||||
you may not use this file except in compliance with the License.
|
||||
You may obtain a copy of the License at
|
||||
|
||||
http://www.apache.org/licenses/LICENSE-2.0
|
||||
|
||||
Unless required by applicable law or agreed to in writing, software
|
||||
distributed under the License is distributed on an "AS IS" BASIS,
|
||||
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
See the License for the specific language governing permissions and
|
||||
limitations under the License.
|
||||
*/
|
||||
|
||||
import React from 'react';
|
||||
import CirclePicker from 'react-color/lib/Circle.js';
|
||||
import { blockDefaultProps } from '@lowdefy/block-utils';
|
||||
import Label from '@lowdefy/blocks-antd/blocks/Label/Label.js';
|
||||
|
||||
const Selector = ({ blockId, loading, methods, properties, required, validation, value }) => {
|
||||
return (
|
||||
<Label
|
||||
blockId={blockId}
|
||||
loading={loading}
|
||||
methods={methods}
|
||||
properties={{
|
||||
title: properties.title,
|
||||
size: properties.size,
|
||||
style: { alignSelf: 'center' },
|
||||
...properties.label,
|
||||
}}
|
||||
required={required}
|
||||
validation={validation}
|
||||
content={{
|
||||
content: () => (
|
||||
<div
|
||||
className={methods.makeCssClass([
|
||||
{
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
},
|
||||
properties.inputStyle,
|
||||
])}
|
||||
>
|
||||
{properties.showValue && (
|
||||
<div
|
||||
className={methods.makeCssClass([
|
||||
{
|
||||
paddingRight: properties.circleSpacing || 14,
|
||||
textAlign: 'center',
|
||||
fontFamily: 'monospace',
|
||||
whiteSpace: 'nowrap',
|
||||
},
|
||||
properties.valueStyle,
|
||||
])}
|
||||
>
|
||||
{value || '-------'}
|
||||
</div>
|
||||
)}
|
||||
<CirclePicker
|
||||
id={`${blockId}_input`}
|
||||
circleSize={properties.circleSize || 28}
|
||||
circleSpacing={properties.circleSpacing || 14}
|
||||
color={value || properties.defaultColor || '#000000'}
|
||||
colors={properties.colors}
|
||||
width={properties.width || '100%'}
|
||||
onChangeComplete={(color) => {
|
||||
methods.setValue(color.hex || '#000000');
|
||||
methods.triggerEvent({ name: 'onChange' });
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
),
|
||||
}}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
Selector.defaultProps = blockDefaultProps;
|
||||
Selector.meta = {
|
||||
valueType: 'string',
|
||||
category: 'input',
|
||||
loading: {
|
||||
type: 'Skeleton',
|
||||
properties: {
|
||||
height: 42,
|
||||
},
|
||||
},
|
||||
icons: [...Label.meta.icons],
|
||||
styles: ['blocks/CircleColorSelector/style.less'],
|
||||
};
|
||||
|
||||
export default Selector;
|
||||
@ -1,50 +0,0 @@
|
||||
/*
|
||||
Copyright 2020-2021 Lowdefy, Inc
|
||||
|
||||
Licensed under the Apache License, Version 2.0 (the "License");
|
||||
you may not use this file except in compliance with the License.
|
||||
You may obtain a copy of the License at
|
||||
|
||||
http://www.apache.org/licenses/LICENSE-2.0
|
||||
|
||||
Unless required by applicable law or agreed to in writing, software
|
||||
distributed under the License is distributed on an "AS IS" BASIS,
|
||||
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
See the License for the specific language governing permissions and
|
||||
limitations under the License.
|
||||
*/
|
||||
|
||||
import { runMockRenderTests } from '@lowdefy/block-dev';
|
||||
|
||||
import Block from './CircleColorSelector.js';
|
||||
import examples from './examples.yaml';
|
||||
import schema from './schema.json';
|
||||
|
||||
const testConfig = {
|
||||
validation: true,
|
||||
required: true,
|
||||
values: [],
|
||||
};
|
||||
|
||||
jest.mock('react-color', () => {
|
||||
const selectors = {
|
||||
CirclePicker: jest.fn(() => 'mocked'),
|
||||
};
|
||||
return selectors;
|
||||
});
|
||||
|
||||
const mocks = [
|
||||
{
|
||||
getMockFns: async () => {
|
||||
const antd = await import('react-color');
|
||||
return [antd.CirclePicker];
|
||||
},
|
||||
getBlock: async () => {
|
||||
const Block = await import('./CircleColorSelector.js');
|
||||
return Block.default;
|
||||
},
|
||||
name: 'CircleColorSelector',
|
||||
},
|
||||
];
|
||||
|
||||
runMockRenderTests({ Block, examples, mocks, schema, testConfig });
|
||||
@ -1,30 +0,0 @@
|
||||
/*
|
||||
Copyright 2020-2021 Lowdefy, Inc
|
||||
|
||||
Licensed under the Apache License, Version 2.0 (the "License");
|
||||
you may not use this file except in compliance with the License.
|
||||
You may obtain a copy of the License at
|
||||
|
||||
http://www.apache.org/licenses/LICENSE-2.0
|
||||
|
||||
Unless required by applicable law or agreed to in writing, software
|
||||
distributed under the License is distributed on an "AS IS" BASIS,
|
||||
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
See the License for the specific language governing permissions and
|
||||
limitations under the License.
|
||||
*/
|
||||
|
||||
import { runBlockSchemaTests, runRenderTests } from '@lowdefy/block-dev';
|
||||
|
||||
import Block from './CircleColorSelector.js';
|
||||
import examples from './examples.yaml';
|
||||
import schema from './schema.json';
|
||||
|
||||
const testConfig = {
|
||||
validation: true,
|
||||
required: true,
|
||||
values: [],
|
||||
};
|
||||
|
||||
runRenderTests({ Block, examples, schema, testConfig });
|
||||
runBlockSchemaTests({ examples, schema });
|
||||
@ -1,208 +0,0 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`Mock render - circleSize - value[0] - CircleColorSelector 1`] = `
|
||||
Array [
|
||||
Array [
|
||||
Object {
|
||||
"circleSize": 50,
|
||||
"circleSpacing": 14,
|
||||
"color": "#000000",
|
||||
"colors": undefined,
|
||||
"id": "circleSize_input",
|
||||
"onChangeComplete": [Function],
|
||||
"width": "100%",
|
||||
},
|
||||
Object {},
|
||||
],
|
||||
]
|
||||
`;
|
||||
|
||||
exports[`Mock render - circleSpacing - value[0] - CircleColorSelector 1`] = `
|
||||
Array [
|
||||
Array [
|
||||
Object {
|
||||
"circleSize": 28,
|
||||
"circleSpacing": 1,
|
||||
"color": "#000000",
|
||||
"colors": undefined,
|
||||
"id": "circleSpacing_input",
|
||||
"onChangeComplete": [Function],
|
||||
"width": "100%",
|
||||
},
|
||||
Object {},
|
||||
],
|
||||
]
|
||||
`;
|
||||
|
||||
exports[`Mock render - colors - value[0] - CircleColorSelector 1`] = `
|
||||
Array [
|
||||
Array [
|
||||
Object {
|
||||
"circleSize": 28,
|
||||
"circleSpacing": 14,
|
||||
"color": "#000000",
|
||||
"colors": Array [
|
||||
"#123456",
|
||||
"#abc345",
|
||||
],
|
||||
"id": "colors_input",
|
||||
"onChangeComplete": [Function],
|
||||
"width": "100%",
|
||||
},
|
||||
Object {},
|
||||
],
|
||||
]
|
||||
`;
|
||||
|
||||
exports[`Mock render - default - value[0] - CircleColorSelector 1`] = `
|
||||
Array [
|
||||
Array [
|
||||
Object {
|
||||
"circleSize": 28,
|
||||
"circleSpacing": 14,
|
||||
"color": "#000000",
|
||||
"colors": undefined,
|
||||
"id": "default_input",
|
||||
"onChangeComplete": [Function],
|
||||
"width": "100%",
|
||||
},
|
||||
Object {},
|
||||
],
|
||||
]
|
||||
`;
|
||||
|
||||
exports[`Mock render - defaultColor - value[0] - CircleColorSelector 1`] = `
|
||||
Array [
|
||||
Array [
|
||||
Object {
|
||||
"circleSize": 28,
|
||||
"circleSpacing": 14,
|
||||
"color": "#FF0000",
|
||||
"colors": undefined,
|
||||
"id": "defaultColor_input",
|
||||
"onChangeComplete": [Function],
|
||||
"width": "100%",
|
||||
},
|
||||
Object {},
|
||||
],
|
||||
]
|
||||
`;
|
||||
|
||||
exports[`Mock render - inputStyle - value[0] - CircleColorSelector 1`] = `
|
||||
Array [
|
||||
Array [
|
||||
Object {
|
||||
"circleSize": 28,
|
||||
"circleSpacing": 14,
|
||||
"color": "#000000",
|
||||
"colors": undefined,
|
||||
"id": "inputStyle_input",
|
||||
"onChangeComplete": [Function],
|
||||
"width": "100%",
|
||||
},
|
||||
Object {},
|
||||
],
|
||||
]
|
||||
`;
|
||||
|
||||
exports[`Mock render - label-disabled - value[0] - CircleColorSelector 1`] = `
|
||||
Array [
|
||||
Array [
|
||||
Object {
|
||||
"circleSize": 28,
|
||||
"circleSpacing": 14,
|
||||
"color": "#000000",
|
||||
"colors": undefined,
|
||||
"id": "label-disabled_input",
|
||||
"onChangeComplete": [Function],
|
||||
"width": "100%",
|
||||
},
|
||||
Object {},
|
||||
],
|
||||
]
|
||||
`;
|
||||
|
||||
exports[`Mock render - showValue - value[0] - CircleColorSelector 1`] = `
|
||||
Array [
|
||||
Array [
|
||||
Object {
|
||||
"circleSize": 28,
|
||||
"circleSpacing": 14,
|
||||
"color": "#000000",
|
||||
"colors": undefined,
|
||||
"id": "showValue_input",
|
||||
"onChangeComplete": [Function],
|
||||
"width": "100%",
|
||||
},
|
||||
Object {},
|
||||
],
|
||||
]
|
||||
`;
|
||||
|
||||
exports[`Mock render - showValue, value - value[0] - CircleColorSelector 1`] = `
|
||||
Array [
|
||||
Array [
|
||||
Object {
|
||||
"circleSize": 28,
|
||||
"circleSpacing": 14,
|
||||
"color": "#000000",
|
||||
"colors": undefined,
|
||||
"id": "showValue, value_input",
|
||||
"onChangeComplete": [Function],
|
||||
"width": "100%",
|
||||
},
|
||||
Object {},
|
||||
],
|
||||
]
|
||||
`;
|
||||
|
||||
exports[`Mock render - title - value[0] - CircleColorSelector 1`] = `
|
||||
Array [
|
||||
Array [
|
||||
Object {
|
||||
"circleSize": 28,
|
||||
"circleSpacing": 14,
|
||||
"color": "#000000",
|
||||
"colors": undefined,
|
||||
"id": "title_input",
|
||||
"onChangeComplete": [Function],
|
||||
"width": "100%",
|
||||
},
|
||||
Object {},
|
||||
],
|
||||
]
|
||||
`;
|
||||
|
||||
exports[`Mock render - valueStyle - value[0] - CircleColorSelector 1`] = `
|
||||
Array [
|
||||
Array [
|
||||
Object {
|
||||
"circleSize": 28,
|
||||
"circleSpacing": 14,
|
||||
"color": "#000000",
|
||||
"colors": undefined,
|
||||
"id": "valueStyle_input",
|
||||
"onChangeComplete": [Function],
|
||||
"width": "100%",
|
||||
},
|
||||
Object {},
|
||||
],
|
||||
]
|
||||
`;
|
||||
|
||||
exports[`Mock render - width - value[0] - CircleColorSelector 1`] = `
|
||||
Array [
|
||||
Array [
|
||||
Object {
|
||||
"circleSize": 28,
|
||||
"circleSpacing": 14,
|
||||
"color": "#000000",
|
||||
"colors": undefined,
|
||||
"id": "width_input",
|
||||
"onChangeComplete": [Function],
|
||||
"width": 200,
|
||||
},
|
||||
Object {},
|
||||
],
|
||||
]
|
||||
`;
|
||||
File diff suppressed because it is too large
Load Diff
@ -1,66 +0,0 @@
|
||||
# Copyright 2020-2021 Lowdefy, Inc
|
||||
|
||||
# Licensed under the Apache License, Version 2.0 (the "License");
|
||||
# you may not use this file except in compliance with the License.
|
||||
# You may obtain a copy of the License at
|
||||
|
||||
# http://www.apache.org/licenses/LICENSE-2.0
|
||||
|
||||
# Unless required by applicable law or agreed to in writing, software
|
||||
# distributed under the License is distributed on an "AS IS" BASIS,
|
||||
# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
# See the License for the specific language governing permissions and
|
||||
# limitations under the License.
|
||||
|
||||
- id: default
|
||||
type: CircleColorSelector
|
||||
- id: title
|
||||
type: CircleColorSelector
|
||||
properties:
|
||||
title: The color selector
|
||||
- id: circleSize
|
||||
type: CircleColorSelector
|
||||
properties:
|
||||
circleSize: 50
|
||||
- id: circleSpacing
|
||||
type: CircleColorSelector
|
||||
properties:
|
||||
circleSpacing: 1
|
||||
- id: colors
|
||||
type: CircleColorSelector
|
||||
properties:
|
||||
colors: ['#123456', '#abc345']
|
||||
- id: defaultColor
|
||||
type: CircleColorSelector
|
||||
properties:
|
||||
defaultColor: '#FF0000'
|
||||
- id: inputStyle
|
||||
type: CircleColorSelector
|
||||
properties:
|
||||
inputStyle:
|
||||
border: 3px solid blue
|
||||
- id: width
|
||||
type: CircleColorSelector
|
||||
properties:
|
||||
width: 200
|
||||
- id: label-disabled
|
||||
type: CircleColorSelector
|
||||
properties:
|
||||
label:
|
||||
disabled: true
|
||||
- id: showValue
|
||||
type: CircleColorSelector
|
||||
properties:
|
||||
showValue: true
|
||||
- id: showValue, value
|
||||
type: CircleColorSelector
|
||||
value: '#ababab'
|
||||
properties:
|
||||
showValue: true
|
||||
- id: valueStyle
|
||||
type: CircleColorSelector
|
||||
properties:
|
||||
showValue: true
|
||||
valueStyle:
|
||||
color: red
|
||||
fontSize: 32
|
||||
@ -1,156 +0,0 @@
|
||||
{
|
||||
"type": "object",
|
||||
"properties": {
|
||||
"type": "object",
|
||||
"properties": {
|
||||
"circleSize": {
|
||||
"type": "number",
|
||||
"description": "Pixel value for circle size.",
|
||||
"default": 28
|
||||
},
|
||||
"circleSpacing": {
|
||||
"type": "number",
|
||||
"description": "Pixel value for spacing between circles.",
|
||||
"default": 14
|
||||
},
|
||||
"colors": {
|
||||
"type": "array",
|
||||
"description": "Colors to display.",
|
||||
"default": [
|
||||
"#f44336",
|
||||
"#e91e63",
|
||||
"#9c27b0",
|
||||
"#673ab7",
|
||||
"#3f51b5",
|
||||
"#2196f3",
|
||||
"#03a9f4",
|
||||
"#00bcd4",
|
||||
"#009688",
|
||||
"#4caf50",
|
||||
"#8bc34a",
|
||||
"#cddc39",
|
||||
"#ffeb3b",
|
||||
"#ffc107",
|
||||
"#ff9800",
|
||||
"#ff5722",
|
||||
"#795548",
|
||||
"#607d8b"
|
||||
],
|
||||
"items": {
|
||||
"type": "string",
|
||||
"docs": {
|
||||
"displayType": "color"
|
||||
}
|
||||
}
|
||||
},
|
||||
"defaultColor": {
|
||||
"type": "string",
|
||||
"default": "#000000",
|
||||
"description": "Default color to display if input value is null.",
|
||||
"docs": {
|
||||
"displayType": "color"
|
||||
}
|
||||
},
|
||||
"inputStyle": {
|
||||
"type": "object",
|
||||
"description": "Css style to applied to input.",
|
||||
"docs": {
|
||||
"displayType": "yaml"
|
||||
}
|
||||
},
|
||||
"valueStyle": {
|
||||
"type": "object",
|
||||
"description": "Css style to applied to value text when is displayed.",
|
||||
"docs": {
|
||||
"displayType": "yaml"
|
||||
}
|
||||
},
|
||||
"showValue": {
|
||||
"type": "boolean",
|
||||
"description": "Display the selector value next to the circle selector.",
|
||||
"default": false
|
||||
},
|
||||
"label": {
|
||||
"type": "object",
|
||||
"description": "Label properties.",
|
||||
"additionalProperties": false,
|
||||
"properties": {
|
||||
"align": {
|
||||
"type": "string",
|
||||
"enum": ["left", "right"],
|
||||
"default": "left",
|
||||
"description": "Align label left or right when inline."
|
||||
},
|
||||
"colon": {
|
||||
"type": "boolean",
|
||||
"default": true,
|
||||
"description": "Append label with colon."
|
||||
},
|
||||
"extra": {
|
||||
"type": "string",
|
||||
"description": "Extra text to display beneath the content."
|
||||
},
|
||||
"title": {
|
||||
"type": "string",
|
||||
"description": "Label title."
|
||||
},
|
||||
"span": {
|
||||
"type": "number",
|
||||
"description": "Label inline span."
|
||||
},
|
||||
"disabled": {
|
||||
"type": "boolean",
|
||||
"default": false,
|
||||
"description": "Hide input label."
|
||||
},
|
||||
"hasFeedback": {
|
||||
"type": "boolean",
|
||||
"default": true,
|
||||
"description": "Display feedback extra from validation, this does not disable validation."
|
||||
},
|
||||
"inline": {
|
||||
"type": "boolean",
|
||||
"default": false,
|
||||
"description": "Render input and label inline."
|
||||
},
|
||||
"extraStyle": {
|
||||
"type": "object",
|
||||
"description": "Css style to applied to label extra.",
|
||||
"docs": {
|
||||
"displayType": "yaml"
|
||||
}
|
||||
},
|
||||
"feedbackStyle": {
|
||||
"type": "object",
|
||||
"description": "Css style to applied to label feedback.",
|
||||
"docs": {
|
||||
"displayType": "yaml"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"title": {
|
||||
"type": "string",
|
||||
"description": "Title to describe the input component, if no title is specified the block id is displayed."
|
||||
},
|
||||
"width": {
|
||||
"type": ["string", "number"],
|
||||
"description": "Color selector width.",
|
||||
"default": "100%",
|
||||
"docs": {
|
||||
"displayType": "string"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"events": {
|
||||
"type": "object",
|
||||
"additionalProperties": false,
|
||||
"properties": {
|
||||
"onChange": {
|
||||
"type": "array",
|
||||
"description": "Trigger actions when color is picked."
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,17 +0,0 @@
|
||||
/*
|
||||
Copyright 2020-2021 Lowdefy, Inc
|
||||
|
||||
Licensed under the Apache License, Version 2.0 (the "License");
|
||||
you may not use this file except in compliance with the License.
|
||||
You may obtain a copy of the License at
|
||||
|
||||
http://www.apache.org/licenses/LICENSE-2.0
|
||||
|
||||
Unless required by applicable law or agreed to in writing, software
|
||||
distributed under the License is distributed on an "AS IS" BASIS,
|
||||
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
See the License for the specific language governing permissions and
|
||||
limitations under the License.
|
||||
*/
|
||||
|
||||
@import '@lowdefy/blocks-antd/blocks/Label/style.less';
|
||||
@ -0,0 +1,85 @@
|
||||
/*
|
||||
Copyright 2020-2021 Lowdefy, Inc
|
||||
|
||||
Licensed under the Apache License, Version 2.0 (the "License");
|
||||
you may not use this file except in compliance with the License.
|
||||
You may obtain a copy of the License at
|
||||
|
||||
http://www.apache.org/licenses/LICENSE-2.0
|
||||
|
||||
Unless required by applicable law or agreed to in writing, software
|
||||
distributed under the License is distributed on an "AS IS" BASIS,
|
||||
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
See the License for the specific language governing permissions and
|
||||
limitations under the License.
|
||||
*/
|
||||
|
||||
import React, { useCallback, useRef, useState } from 'react';
|
||||
import { HexColorPicker, HexColorInput } from 'react-colorful';
|
||||
import classNames from 'classnames';
|
||||
|
||||
import useClickOutside from './useClickOutside.js';
|
||||
|
||||
const DEFAULT_COLOR = '#000000';
|
||||
|
||||
export const ColorPicker = ({
|
||||
className,
|
||||
disabled,
|
||||
hideInput,
|
||||
onChange,
|
||||
size,
|
||||
undefinedColor,
|
||||
value,
|
||||
}) => {
|
||||
const popover = useRef();
|
||||
const [isOpen, toggle] = useState(false);
|
||||
const [color, setColor] = useState(value || undefinedColor || DEFAULT_COLOR);
|
||||
|
||||
const close = useCallback((newColor) => {
|
||||
toggle(false);
|
||||
onChange(newColor);
|
||||
}, []);
|
||||
useClickOutside(popover, close, value);
|
||||
return (
|
||||
<div
|
||||
className={classNames({
|
||||
'color-picker': true,
|
||||
[className]: true,
|
||||
})}
|
||||
>
|
||||
<div
|
||||
className={classNames({
|
||||
'color-picker-swatch': true,
|
||||
'color-picker-swatch-sm': size === 'small',
|
||||
'color-picker-swatch-lg': size === 'large',
|
||||
'color-picker-swatch-disabled': disabled,
|
||||
})}
|
||||
style={{ backgroundColor: color }}
|
||||
onClick={() => !disabled && toggle(true)}
|
||||
/>
|
||||
{!hideInput && (
|
||||
<HexColorInput
|
||||
className={classNames({
|
||||
'color-picker-input': true,
|
||||
'color-picker-input-sm ': size === 'small',
|
||||
'color-picker-input-lg': size === 'large',
|
||||
'ant-input': true,
|
||||
'ant-input-sm': size === 'small',
|
||||
'ant-input-lg': size === 'large',
|
||||
})}
|
||||
color={color}
|
||||
onChange={setColor}
|
||||
prefixed={true}
|
||||
disabled={disabled}
|
||||
/>
|
||||
)}
|
||||
{isOpen && (
|
||||
<div className="color-picker-popover" ref={popover}>
|
||||
<HexColorPicker color={color} onChange={setColor} />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default ColorPicker;
|
||||
@ -15,14 +15,27 @@
|
||||
*/
|
||||
|
||||
import React from 'react';
|
||||
import BlockPicker from 'react-color/lib/Block.js';
|
||||
import { blockDefaultProps } from '@lowdefy/block-utils';
|
||||
import Label from '@lowdefy/blocks-antd/blocks/Label/Label.js';
|
||||
|
||||
const Selector = ({ blockId, loading, methods, properties, required, validation, value }) => {
|
||||
import ColorPicker from './ColorPicker.js';
|
||||
|
||||
const ColorSelector = ({
|
||||
blockId,
|
||||
components,
|
||||
events,
|
||||
loading,
|
||||
methods,
|
||||
properties,
|
||||
required,
|
||||
validation,
|
||||
value,
|
||||
}) => {
|
||||
return (
|
||||
<Label
|
||||
blockId={blockId}
|
||||
components={components}
|
||||
events={events}
|
||||
loading={loading}
|
||||
methods={methods}
|
||||
properties={{ title: properties.title, size: properties.size, ...properties.label }}
|
||||
@ -30,20 +43,22 @@ const Selector = ({ blockId, loading, methods, properties, required, validation,
|
||||
validation={validation}
|
||||
content={{
|
||||
content: () => (
|
||||
<BlockPicker
|
||||
<ColorPicker
|
||||
id={`${blockId}_input`}
|
||||
className={methods.makeCssClass([
|
||||
{ marginBottom: '0px !important' },
|
||||
properties.inputStyle,
|
||||
])}
|
||||
color={value || properties.defaultColor || '#000000'}
|
||||
colors={properties.colors}
|
||||
triangle={properties.triangle || 'hide'}
|
||||
width={properties.width || '100%'}
|
||||
onChangeComplete={(color) => {
|
||||
methods.setValue(color.hex ? color.hex : '#000000');
|
||||
onChange={(newColor) => {
|
||||
methods.setValue(newColor);
|
||||
methods.triggerEvent({ name: 'onChange' });
|
||||
}}
|
||||
size={properties.size}
|
||||
undefinedColor={properties.undefinedColor}
|
||||
value={value}
|
||||
hideInput={properties.hideInput}
|
||||
disabled={properties.disabled}
|
||||
methods={methods}
|
||||
/>
|
||||
),
|
||||
}}
|
||||
@ -51,8 +66,8 @@ const Selector = ({ blockId, loading, methods, properties, required, validation,
|
||||
);
|
||||
};
|
||||
|
||||
Selector.defaultProps = blockDefaultProps;
|
||||
Selector.meta = {
|
||||
ColorSelector.defaultProps = blockDefaultProps;
|
||||
ColorSelector.meta = {
|
||||
valueType: 'string',
|
||||
category: 'input',
|
||||
loading: {
|
||||
@ -65,4 +80,4 @@ Selector.meta = {
|
||||
styles: ['blocks/ColorSelector/style.less'],
|
||||
};
|
||||
|
||||
export default Selector;
|
||||
export default ColorSelector;
|
||||
|
||||
@ -1,123 +0,0 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`Mock render - colors - value[0] - ColorSelector 1`] = `
|
||||
Array [
|
||||
Array [
|
||||
Object {
|
||||
"className": "{\\"style\\":[{\\"marginBottom\\":\\"0px !important\\"},null]}",
|
||||
"color": "#000000",
|
||||
"colors": Array [
|
||||
"#123456",
|
||||
"#abc345",
|
||||
],
|
||||
"id": "colors_input",
|
||||
"onChangeComplete": [Function],
|
||||
"triangle": "hide",
|
||||
"width": "100%",
|
||||
},
|
||||
Object {},
|
||||
],
|
||||
]
|
||||
`;
|
||||
|
||||
exports[`Mock render - default - value[0] - ColorSelector 1`] = `
|
||||
Array [
|
||||
Array [
|
||||
Object {
|
||||
"className": "{\\"style\\":[{\\"marginBottom\\":\\"0px !important\\"},null]}",
|
||||
"color": "#000000",
|
||||
"colors": undefined,
|
||||
"id": "default_input",
|
||||
"onChangeComplete": [Function],
|
||||
"triangle": "hide",
|
||||
"width": "100%",
|
||||
},
|
||||
Object {},
|
||||
],
|
||||
]
|
||||
`;
|
||||
|
||||
exports[`Mock render - defaultColor - value[0] - ColorSelector 1`] = `
|
||||
Array [
|
||||
Array [
|
||||
Object {
|
||||
"className": "{\\"style\\":[{\\"marginBottom\\":\\"0px !important\\"},null]}",
|
||||
"color": "#FF0000",
|
||||
"colors": undefined,
|
||||
"id": "defaultColor_input",
|
||||
"onChangeComplete": [Function],
|
||||
"triangle": "hide",
|
||||
"width": "100%",
|
||||
},
|
||||
Object {},
|
||||
],
|
||||
]
|
||||
`;
|
||||
|
||||
exports[`Mock render - inputStyle - value[0] - ColorSelector 1`] = `
|
||||
Array [
|
||||
Array [
|
||||
Object {
|
||||
"className": "{\\"style\\":[{\\"marginBottom\\":\\"0px !important\\"},{\\"border\\":\\"3px solid blue\\"}]}",
|
||||
"color": "#000000",
|
||||
"colors": undefined,
|
||||
"id": "inputStyle_input",
|
||||
"onChangeComplete": [Function],
|
||||
"triangle": "hide",
|
||||
"width": "100%",
|
||||
},
|
||||
Object {},
|
||||
],
|
||||
]
|
||||
`;
|
||||
|
||||
exports[`Mock render - label-disabled - value[0] - ColorSelector 1`] = `
|
||||
Array [
|
||||
Array [
|
||||
Object {
|
||||
"className": "{\\"style\\":[{\\"marginBottom\\":\\"0px !important\\"},null]}",
|
||||
"color": "#000000",
|
||||
"colors": undefined,
|
||||
"id": "label-disabled_input",
|
||||
"onChangeComplete": [Function],
|
||||
"triangle": "hide",
|
||||
"width": "100%",
|
||||
},
|
||||
Object {},
|
||||
],
|
||||
]
|
||||
`;
|
||||
|
||||
exports[`Mock render - title - value[0] - ColorSelector 1`] = `
|
||||
Array [
|
||||
Array [
|
||||
Object {
|
||||
"className": "{\\"style\\":[{\\"marginBottom\\":\\"0px !important\\"},null]}",
|
||||
"color": "#000000",
|
||||
"colors": undefined,
|
||||
"id": "title_input",
|
||||
"onChangeComplete": [Function],
|
||||
"triangle": "hide",
|
||||
"width": "100%",
|
||||
},
|
||||
Object {},
|
||||
],
|
||||
]
|
||||
`;
|
||||
|
||||
exports[`Mock render - width - value[0] - ColorSelector 1`] = `
|
||||
Array [
|
||||
Array [
|
||||
Object {
|
||||
"className": "{\\"style\\":[{\\"marginBottom\\":\\"0px !important\\"},null]}",
|
||||
"color": "#000000",
|
||||
"colors": undefined,
|
||||
"id": "width_input",
|
||||
"onChangeComplete": [Function],
|
||||
"triangle": "hide",
|
||||
"width": 200,
|
||||
},
|
||||
Object {},
|
||||
],
|
||||
]
|
||||
`;
|
||||
File diff suppressed because it is too large
Load Diff
@ -12,31 +12,55 @@
|
||||
# See the License for the specific language governing permissions and
|
||||
# limitations under the License.
|
||||
|
||||
- id: default
|
||||
type: ColorSelector
|
||||
- id: title
|
||||
type: ColorSelector
|
||||
properties:
|
||||
title: The color selector
|
||||
- id: colors
|
||||
title: title
|
||||
- id: size_small
|
||||
type: ColorSelector
|
||||
properties:
|
||||
colors: ['#123456', '#abc345']
|
||||
- id: defaultColor
|
||||
title: size_small
|
||||
size: small
|
||||
- id: size_large
|
||||
type: ColorSelector
|
||||
properties:
|
||||
defaultColor: '#FF0000'
|
||||
- id: inputStyle
|
||||
title: size_large
|
||||
size: large
|
||||
- id: undefined_color
|
||||
type: ColorSelector
|
||||
properties:
|
||||
title: undefined_color
|
||||
undefinedColor: '#0092f0'
|
||||
- id: style
|
||||
type: ColorSelector
|
||||
style:
|
||||
border: 1px solid red
|
||||
properties:
|
||||
title: style
|
||||
- id: className
|
||||
type: ColorSelector
|
||||
properties:
|
||||
title: className
|
||||
inputStyle:
|
||||
border: 3px solid blue
|
||||
- id: width
|
||||
border: 1px solid red
|
||||
- id: hideInput_true
|
||||
type: ColorSelector
|
||||
properties:
|
||||
width: 200
|
||||
- id: label-disabled
|
||||
title: hideInput_true
|
||||
hideInput: true
|
||||
- id: hideInput_true
|
||||
type: ColorSelector
|
||||
properties:
|
||||
label:
|
||||
disabled: true
|
||||
title: hideInput_true
|
||||
hideInput: true
|
||||
- id: disabled_true
|
||||
type: ColorSelector
|
||||
properties:
|
||||
title: disabled_true
|
||||
disabled: true
|
||||
- id: disabled_true_small
|
||||
type: ColorSelector
|
||||
properties:
|
||||
title: disabled_true_small
|
||||
disabled: true
|
||||
size: small
|
||||
|
||||
@ -7,28 +7,7 @@
|
||||
"type": "string",
|
||||
"description": "Title to describe the input component, if no title is specified the block id is displayed."
|
||||
},
|
||||
"colors": {
|
||||
"type": "array",
|
||||
"description": "Colors to display.",
|
||||
"default": [
|
||||
"#D9E3F0",
|
||||
"#F47373",
|
||||
"#697689",
|
||||
"#37D67A",
|
||||
"#2CCCE4",
|
||||
"#555555",
|
||||
"#dce775",
|
||||
"#ff8a65",
|
||||
"#ba68c8"
|
||||
],
|
||||
"items": {
|
||||
"type": "string",
|
||||
"docs": {
|
||||
"displayType": "color"
|
||||
}
|
||||
}
|
||||
},
|
||||
"defaultColor": {
|
||||
"undefinedColor": {
|
||||
"type": "string",
|
||||
"default": "#000000",
|
||||
"description": "Default color to display if input value is null.",
|
||||
@ -43,19 +22,15 @@
|
||||
"displayType": "yaml"
|
||||
}
|
||||
},
|
||||
"triangle": {
|
||||
"disabled": {
|
||||
"type": "boolean",
|
||||
"enum": ["hide", "top"],
|
||||
"default": "hide",
|
||||
"description": "Show triangle on color selector border."
|
||||
"default": false,
|
||||
"description": "If true, the input is disabled."
|
||||
},
|
||||
"width": {
|
||||
"type": ["string", "number"],
|
||||
"description": "Color selector width.",
|
||||
"default": "100%",
|
||||
"docs": {
|
||||
"displayType": "string"
|
||||
}
|
||||
"hideInput": {
|
||||
"type": "boolean",
|
||||
"default": false,
|
||||
"description": "If true, the input is hidden."
|
||||
},
|
||||
"label": {
|
||||
"type": "object",
|
||||
|
||||
@ -15,3 +15,59 @@
|
||||
*/
|
||||
|
||||
@import '@lowdefy/blocks-antd/blocks/Label/style.less';
|
||||
@import '@lowdefy/blocks-antd/blocks/TextInput/style.less';
|
||||
|
||||
.color-picker {
|
||||
position: relative;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.color-picker-swatch {
|
||||
flex: 0 0 auto;
|
||||
width: 34px;
|
||||
height: 34px;
|
||||
border-radius: 2px;
|
||||
border: 3px solid #fff;
|
||||
box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1), inset 0 0 0 1px rgba(0, 0, 0, 0.1);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.color-picker-swatch-disabled {
|
||||
cursor: disabled;
|
||||
}
|
||||
|
||||
.color-picker-swatch-sm {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
}
|
||||
|
||||
.color-picker-swatch-lg {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
.small .react-colorful {
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
}
|
||||
|
||||
.color-picker-popover {
|
||||
position: absolute;
|
||||
top: calc(100% + 2px);
|
||||
left: 0;
|
||||
border-radius: 3px;
|
||||
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
.color-picker-input {
|
||||
margin-left: 8px;
|
||||
}
|
||||
|
||||
.color-picker-input-sm {
|
||||
margin-left: 0px;
|
||||
}
|
||||
|
||||
.color-picker-input-lg {
|
||||
margin-left: 12px;
|
||||
}
|
||||
|
||||
@ -0,0 +1,51 @@
|
||||
/*
|
||||
Copyright 2020-2021 Lowdefy, Inc
|
||||
|
||||
Licensed under the Apache License, Version 2.0 (the "License");
|
||||
you may not use this file except in compliance with the License.
|
||||
You may obtain a copy of the License at
|
||||
|
||||
http://www.apache.org/licenses/LICENSE-2.0
|
||||
|
||||
Unless required by applicable law or agreed to in writing, software
|
||||
distributed under the License is distributed on an "AS IS" BASIS,
|
||||
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
See the License for the specific language governing permissions and
|
||||
limitations under the License.
|
||||
*/
|
||||
|
||||
import { useEffect } from 'react';
|
||||
|
||||
// Improved version of https://usehooks.com/useOnClickOutside/
|
||||
const useClickOutside = (ref, handler, value) => {
|
||||
useEffect(() => {
|
||||
let startedInside = false;
|
||||
let startedWhenMounted = false;
|
||||
|
||||
const listener = (event) => {
|
||||
// Do nothing if `mousedown` or `touchstart` started inside ref element
|
||||
if (startedInside || !startedWhenMounted) return;
|
||||
// Do nothing if clicking ref's element or descendent elements
|
||||
if (!ref.current || ref.current.contains(event.target)) return;
|
||||
|
||||
handler(value, event);
|
||||
};
|
||||
|
||||
const validateEventStart = (event) => {
|
||||
startedWhenMounted = ref.current;
|
||||
startedInside = ref.current && ref.current.contains(event.target);
|
||||
};
|
||||
|
||||
document.addEventListener('mousedown', validateEventStart);
|
||||
document.addEventListener('touchstart', validateEventStart);
|
||||
document.addEventListener('click', listener);
|
||||
|
||||
return () => {
|
||||
document.removeEventListener('mousedown', validateEventStart);
|
||||
document.removeEventListener('touchstart', validateEventStart);
|
||||
document.removeEventListener('click', listener);
|
||||
};
|
||||
}, [ref, handler, value]);
|
||||
};
|
||||
|
||||
export default useClickOutside;
|
||||
@ -1,67 +0,0 @@
|
||||
/*
|
||||
Copyright 2020-2021 Lowdefy, Inc
|
||||
|
||||
Licensed under the Apache License, Version 2.0 (the "License");
|
||||
you may not use this file except in compliance with the License.
|
||||
You may obtain a copy of the License at
|
||||
|
||||
http://www.apache.org/licenses/LICENSE-2.0
|
||||
|
||||
Unless required by applicable law or agreed to in writing, software
|
||||
distributed under the License is distributed on an "AS IS" BASIS,
|
||||
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
See the License for the specific language governing permissions and
|
||||
limitations under the License.
|
||||
*/
|
||||
|
||||
import React from 'react';
|
||||
import CompactPicker from 'react-color/lib/Compact.js';
|
||||
import { blockDefaultProps } from '@lowdefy/block-utils';
|
||||
import Label from '@lowdefy/blocks-antd/blocks/Label/Label.js';
|
||||
|
||||
const Selector = ({ blockId, loading, methods, properties, required, validation, value }) => {
|
||||
return (
|
||||
<Label
|
||||
blockId={blockId}
|
||||
loading={loading}
|
||||
methods={methods}
|
||||
properties={{ title: properties.title, size: properties.size, ...properties.label }}
|
||||
required={required}
|
||||
validation={validation}
|
||||
content={{
|
||||
content: () => (
|
||||
<CompactPicker
|
||||
id={`${blockId}_input`}
|
||||
className={methods.makeCssClass([
|
||||
{ marginBottom: '0px !important' },
|
||||
properties.inputStyle,
|
||||
])}
|
||||
color={value || properties.defaultColor || '#000000'}
|
||||
colors={properties.colors}
|
||||
onChangeComplete={(color) => {
|
||||
methods.setValue(color.hex ? color.hex : '#000000');
|
||||
methods.triggerEvent({ name: 'onChange' });
|
||||
}}
|
||||
/>
|
||||
),
|
||||
}}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
Selector.defaultProps = blockDefaultProps;
|
||||
Selector.meta = {
|
||||
valueType: 'string',
|
||||
category: 'input',
|
||||
loading: {
|
||||
type: 'Skeleton',
|
||||
properties: {
|
||||
width: 245,
|
||||
height: 90,
|
||||
},
|
||||
},
|
||||
icons: [...Label.meta.icons],
|
||||
styles: ['blocks/CompactColorSelector/style.less'],
|
||||
};
|
||||
|
||||
export default Selector;
|
||||
@ -1,50 +0,0 @@
|
||||
/*
|
||||
Copyright 2020-2021 Lowdefy, Inc
|
||||
|
||||
Licensed under the Apache License, Version 2.0 (the "License");
|
||||
you may not use this file except in compliance with the License.
|
||||
You may obtain a copy of the License at
|
||||
|
||||
http://www.apache.org/licenses/LICENSE-2.0
|
||||
|
||||
Unless required by applicable law or agreed to in writing, software
|
||||
distributed under the License is distributed on an "AS IS" BASIS,
|
||||
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
See the License for the specific language governing permissions and
|
||||
limitations under the License.
|
||||
*/
|
||||
|
||||
import { runMockRenderTests } from '@lowdefy/block-dev';
|
||||
|
||||
import Block from './CompactColorSelector.js';
|
||||
import examples from './examples.yaml';
|
||||
import schema from './schema.json';
|
||||
|
||||
const testConfig = {
|
||||
validation: true,
|
||||
required: true,
|
||||
values: [],
|
||||
};
|
||||
|
||||
jest.mock('react-color', () => {
|
||||
const selectors = {
|
||||
CompactPicker: jest.fn(() => 'mocked'),
|
||||
};
|
||||
return selectors;
|
||||
});
|
||||
|
||||
const mocks = [
|
||||
{
|
||||
getMockFns: async () => {
|
||||
const antd = await import('react-color');
|
||||
return [antd.CompactPicker];
|
||||
},
|
||||
getBlock: async () => {
|
||||
const Block = await import('./CompactColorSelector.js');
|
||||
return Block.default;
|
||||
},
|
||||
name: 'CompactColorSelector',
|
||||
},
|
||||
];
|
||||
|
||||
runMockRenderTests({ Block, examples, mocks, schema, testConfig });
|
||||
@ -1,30 +0,0 @@
|
||||
/*
|
||||
Copyright 2020-2021 Lowdefy, Inc
|
||||
|
||||
Licensed under the Apache License, Version 2.0 (the "License");
|
||||
you may not use this file except in compliance with the License.
|
||||
You may obtain a copy of the License at
|
||||
|
||||
http://www.apache.org/licenses/LICENSE-2.0
|
||||
|
||||
Unless required by applicable law or agreed to in writing, software
|
||||
distributed under the License is distributed on an "AS IS" BASIS,
|
||||
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
See the License for the specific language governing permissions and
|
||||
limitations under the License.
|
||||
*/
|
||||
|
||||
import { runBlockSchemaTests, runRenderTests } from '@lowdefy/block-dev';
|
||||
|
||||
import Block from './CompactColorSelector.js';
|
||||
import examples from './examples.yaml';
|
||||
import schema from './schema.json';
|
||||
|
||||
const testConfig = {
|
||||
validation: true,
|
||||
required: true,
|
||||
values: [],
|
||||
};
|
||||
|
||||
runRenderTests({ Block, examples, schema, testConfig });
|
||||
runBlockSchemaTests({ examples, schema });
|
||||
@ -1,94 +0,0 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`Mock render - colors - value[0] - CompactColorSelector 1`] = `
|
||||
Array [
|
||||
Array [
|
||||
Object {
|
||||
"className": "{\\"style\\":[{\\"marginBottom\\":\\"0px !important\\"},null]}",
|
||||
"color": "#000000",
|
||||
"colors": Array [
|
||||
"#123456",
|
||||
"#abc345",
|
||||
],
|
||||
"id": "colors_input",
|
||||
"onChangeComplete": [Function],
|
||||
},
|
||||
Object {},
|
||||
],
|
||||
]
|
||||
`;
|
||||
|
||||
exports[`Mock render - default - value[0] - CompactColorSelector 1`] = `
|
||||
Array [
|
||||
Array [
|
||||
Object {
|
||||
"className": "{\\"style\\":[{\\"marginBottom\\":\\"0px !important\\"},null]}",
|
||||
"color": "#000000",
|
||||
"colors": undefined,
|
||||
"id": "default_input",
|
||||
"onChangeComplete": [Function],
|
||||
},
|
||||
Object {},
|
||||
],
|
||||
]
|
||||
`;
|
||||
|
||||
exports[`Mock render - defaultColor - value[0] - CompactColorSelector 1`] = `
|
||||
Array [
|
||||
Array [
|
||||
Object {
|
||||
"className": "{\\"style\\":[{\\"marginBottom\\":\\"0px !important\\"},null]}",
|
||||
"color": "#FF0000",
|
||||
"colors": undefined,
|
||||
"id": "defaultColor_input",
|
||||
"onChangeComplete": [Function],
|
||||
},
|
||||
Object {},
|
||||
],
|
||||
]
|
||||
`;
|
||||
|
||||
exports[`Mock render - inputStyle - value[0] - CompactColorSelector 1`] = `
|
||||
Array [
|
||||
Array [
|
||||
Object {
|
||||
"className": "{\\"style\\":[{\\"marginBottom\\":\\"0px !important\\"},{\\"border\\":\\"3px solid blue\\"}]}",
|
||||
"color": "#000000",
|
||||
"colors": undefined,
|
||||
"id": "inputStyle_input",
|
||||
"onChangeComplete": [Function],
|
||||
},
|
||||
Object {},
|
||||
],
|
||||
]
|
||||
`;
|
||||
|
||||
exports[`Mock render - label-disabled - value[0] - CompactColorSelector 1`] = `
|
||||
Array [
|
||||
Array [
|
||||
Object {
|
||||
"className": "{\\"style\\":[{\\"marginBottom\\":\\"0px !important\\"},null]}",
|
||||
"color": "#000000",
|
||||
"colors": undefined,
|
||||
"id": "label-disabled_input",
|
||||
"onChangeComplete": [Function],
|
||||
},
|
||||
Object {},
|
||||
],
|
||||
]
|
||||
`;
|
||||
|
||||
exports[`Mock render - title - value[0] - CompactColorSelector 1`] = `
|
||||
Array [
|
||||
Array [
|
||||
Object {
|
||||
"className": "{\\"style\\":[{\\"marginBottom\\":\\"0px !important\\"},null]}",
|
||||
"color": "#000000",
|
||||
"colors": undefined,
|
||||
"id": "title_input",
|
||||
"onChangeComplete": [Function],
|
||||
},
|
||||
Object {},
|
||||
],
|
||||
]
|
||||
`;
|
||||
File diff suppressed because it is too large
Load Diff
@ -1,38 +0,0 @@
|
||||
# Copyright 2020-2021 Lowdefy, Inc
|
||||
|
||||
# Licensed under the Apache License, Version 2.0 (the "License");
|
||||
# you may not use this file except in compliance with the License.
|
||||
# You may obtain a copy of the License at
|
||||
|
||||
# http://www.apache.org/licenses/LICENSE-2.0
|
||||
|
||||
# Unless required by applicable law or agreed to in writing, software
|
||||
# distributed under the License is distributed on an "AS IS" BASIS,
|
||||
# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
# See the License for the specific language governing permissions and
|
||||
# limitations under the License.
|
||||
|
||||
- id: default
|
||||
type: CompactColorSelector
|
||||
- id: title
|
||||
type: CompactColorSelector
|
||||
properties:
|
||||
title: The color selector
|
||||
- id: colors
|
||||
type: CompactColorSelector
|
||||
properties:
|
||||
colors: ['#123456', '#abc345']
|
||||
- id: defaultColor
|
||||
type: CompactColorSelector
|
||||
properties:
|
||||
defaultColor: '#FF0000'
|
||||
- id: inputStyle
|
||||
type: CompactColorSelector
|
||||
properties:
|
||||
inputStyle:
|
||||
border: 3px solid blue
|
||||
- id: label-disabled
|
||||
type: CompactColorSelector
|
||||
properties:
|
||||
label:
|
||||
disabled: true
|
||||
@ -1,144 +0,0 @@
|
||||
{
|
||||
"type": "object",
|
||||
"properties": {
|
||||
"type": "object",
|
||||
"properties": {
|
||||
"colors": {
|
||||
"type": "array",
|
||||
"description": "Colors to display.",
|
||||
"default": [
|
||||
"#4D4D4D",
|
||||
"#999999",
|
||||
"#FFFFFF",
|
||||
"#F44E3B",
|
||||
"#FE9200",
|
||||
"#FCDC00",
|
||||
"#DBDF00",
|
||||
"#A4DD00",
|
||||
"#68CCCA",
|
||||
"#73D8FF",
|
||||
"#AEA1FF",
|
||||
"#FDA1FF",
|
||||
"#333333",
|
||||
"#808080",
|
||||
"#cccccc",
|
||||
"#D33115",
|
||||
"#E27300",
|
||||
"#FCC400",
|
||||
"#B0BC00",
|
||||
"#68BC00",
|
||||
"#16A5A5",
|
||||
"#009CE0",
|
||||
"#7B64FF",
|
||||
"#FA28FF",
|
||||
"#000000",
|
||||
"#666666",
|
||||
"#B3B3B3",
|
||||
"#9F0500",
|
||||
"#C45100",
|
||||
"#FB9E00",
|
||||
"#808900",
|
||||
"#194D33",
|
||||
"#0C797D",
|
||||
"#0062B1",
|
||||
"#653294",
|
||||
"#AB149E"
|
||||
],
|
||||
"items": {
|
||||
"type": "string",
|
||||
"docs": {
|
||||
"displayType": "color"
|
||||
}
|
||||
}
|
||||
},
|
||||
"defaultColor": {
|
||||
"type": "string",
|
||||
"default": "#000000",
|
||||
"description": "Default color to display if input value is null.",
|
||||
"docs": {
|
||||
"displayType": "color"
|
||||
}
|
||||
},
|
||||
"inputStyle": {
|
||||
"type": "object",
|
||||
"description": "Css style to applied to input.",
|
||||
"docs": {
|
||||
"displayType": "yaml"
|
||||
}
|
||||
},
|
||||
"label": {
|
||||
"type": "object",
|
||||
"description": "Label properties.",
|
||||
"additionalProperties": false,
|
||||
"properties": {
|
||||
"align": {
|
||||
"type": "string",
|
||||
"enum": ["left", "right"],
|
||||
"default": "left",
|
||||
"description": "Align label left or right when inline."
|
||||
},
|
||||
"colon": {
|
||||
"type": "boolean",
|
||||
"default": true,
|
||||
"description": "Append label with colon."
|
||||
},
|
||||
"extra": {
|
||||
"type": "string",
|
||||
"description": "Extra text to display beneath the content."
|
||||
},
|
||||
"title": {
|
||||
"type": "string",
|
||||
"description": "Label title."
|
||||
},
|
||||
"span": {
|
||||
"type": "number",
|
||||
"description": "Label inline span."
|
||||
},
|
||||
"disabled": {
|
||||
"type": "boolean",
|
||||
"default": false,
|
||||
"description": "Hide input label."
|
||||
},
|
||||
"hasFeedback": {
|
||||
"type": "boolean",
|
||||
"default": true,
|
||||
"description": "Display feedback extra from validation, this does not disable validation."
|
||||
},
|
||||
"inline": {
|
||||
"type": "boolean",
|
||||
"default": false,
|
||||
"description": "Render input and label inline."
|
||||
},
|
||||
"extraStyle": {
|
||||
"type": "object",
|
||||
"description": "Css style to applied to label extra.",
|
||||
"docs": {
|
||||
"displayType": "yaml"
|
||||
}
|
||||
},
|
||||
"feedbackStyle": {
|
||||
"type": "object",
|
||||
"description": "Css style to applied to label feedback.",
|
||||
"docs": {
|
||||
"displayType": "yaml"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"title": {
|
||||
"type": "string",
|
||||
"description": "Title to describe the input component, if no title is specified the block id is displayed."
|
||||
}
|
||||
}
|
||||
},
|
||||
"events": {
|
||||
"type": "object",
|
||||
"additionalProperties": false,
|
||||
"properties": {
|
||||
"onChange": {
|
||||
"type": "array",
|
||||
"description": "Trigger actions when color is picked."
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,17 +0,0 @@
|
||||
/*
|
||||
Copyright 2020-2021 Lowdefy, Inc
|
||||
|
||||
Licensed under the Apache License, Version 2.0 (the "License");
|
||||
you may not use this file except in compliance with the License.
|
||||
You may obtain a copy of the License at
|
||||
|
||||
http://www.apache.org/licenses/LICENSE-2.0
|
||||
|
||||
Unless required by applicable law or agreed to in writing, software
|
||||
distributed under the License is distributed on an "AS IS" BASIS,
|
||||
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
See the License for the specific language governing permissions and
|
||||
limitations under the License.
|
||||
*/
|
||||
|
||||
@import '@lowdefy/blocks-antd/blocks/Label/style.less';
|
||||
@ -1,69 +0,0 @@
|
||||
/*
|
||||
Copyright 2020-2021 Lowdefy, Inc
|
||||
|
||||
Licensed under the Apache License, Version 2.0 (the "License");
|
||||
you may not use this file except in compliance with the License.
|
||||
You may obtain a copy of the License at
|
||||
|
||||
http://www.apache.org/licenses/LICENSE-2.0
|
||||
|
||||
Unless required by applicable law or agreed to in writing, software
|
||||
distributed under the License is distributed on an "AS IS" BASIS,
|
||||
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
See the License for the specific language governing permissions and
|
||||
limitations under the License.
|
||||
*/
|
||||
|
||||
import React from 'react';
|
||||
import GithubPicker from 'react-color/lib/Github.js';
|
||||
import { blockDefaultProps } from '@lowdefy/block-utils';
|
||||
import Label from '@lowdefy/blocks-antd/blocks/Label/Label.js';
|
||||
|
||||
const Selector = ({ blockId, loading, methods, properties, required, validation, value }) => {
|
||||
return (
|
||||
<Label
|
||||
blockId={blockId}
|
||||
loading={loading}
|
||||
methods={methods}
|
||||
properties={{ title: properties.title, size: properties.size, ...properties.label }}
|
||||
required={required}
|
||||
validation={validation}
|
||||
content={{
|
||||
content: () => (
|
||||
<GithubPicker
|
||||
id={`${blockId}_input`}
|
||||
className={methods.makeCssClass([
|
||||
{ marginBottom: '0px !important' },
|
||||
properties.inputStyle,
|
||||
])}
|
||||
color={value || properties.defaultColor || '#000000'}
|
||||
colors={properties.colors}
|
||||
triangle={properties.triangle || 'hide'}
|
||||
width={properties.width || '100%'}
|
||||
onChangeComplete={(color) => {
|
||||
methods.setValue(color.hex ? color.hex : '#000000');
|
||||
methods.triggerEvent({ name: 'onChange' });
|
||||
}}
|
||||
/>
|
||||
),
|
||||
}}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
Selector.defaultProps = blockDefaultProps;
|
||||
Selector.meta = {
|
||||
valueType: 'string',
|
||||
category: 'input',
|
||||
loading: {
|
||||
type: 'Skeleton',
|
||||
properties: {
|
||||
width: 216,
|
||||
height: 62,
|
||||
},
|
||||
},
|
||||
icons: [...Label.meta.icons],
|
||||
styles: ['blocks/GithubColorSelector/style.less'],
|
||||
};
|
||||
|
||||
export default Selector;
|
||||
@ -1,50 +0,0 @@
|
||||
/*
|
||||
Copyright 2020-2021 Lowdefy, Inc
|
||||
|
||||
Licensed under the Apache License, Version 2.0 (the "License");
|
||||
you may not use this file except in compliance with the License.
|
||||
You may obtain a copy of the License at
|
||||
|
||||
http://www.apache.org/licenses/LICENSE-2.0
|
||||
|
||||
Unless required by applicable law or agreed to in writing, software
|
||||
distributed under the License is distributed on an "AS IS" BASIS,
|
||||
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
See the License for the specific language governing permissions and
|
||||
limitations under the License.
|
||||
*/
|
||||
|
||||
import { runMockRenderTests } from '@lowdefy/block-dev';
|
||||
|
||||
import Block from './GithubColorSelector.js';
|
||||
import examples from './examples.yaml';
|
||||
import schema from './schema.json';
|
||||
|
||||
const testConfig = {
|
||||
validation: true,
|
||||
required: true,
|
||||
values: [],
|
||||
};
|
||||
|
||||
jest.mock('react-color', () => {
|
||||
const selectors = {
|
||||
GithubPicker: jest.fn(() => 'mocked'),
|
||||
};
|
||||
return selectors;
|
||||
});
|
||||
|
||||
const mocks = [
|
||||
{
|
||||
getMockFns: async () => {
|
||||
const antd = await import('react-color');
|
||||
return [antd.GithubPicker];
|
||||
},
|
||||
getBlock: async () => {
|
||||
const Block = await import('./GithubColorSelector.js');
|
||||
return Block.default;
|
||||
},
|
||||
name: 'GithubColorSelector',
|
||||
},
|
||||
];
|
||||
|
||||
runMockRenderTests({ Block, examples, mocks, schema, testConfig });
|
||||
@ -1,30 +0,0 @@
|
||||
/*
|
||||
Copyright 2020-2021 Lowdefy, Inc
|
||||
|
||||
Licensed under the Apache License, Version 2.0 (the "License");
|
||||
you may not use this file except in compliance with the License.
|
||||
You may obtain a copy of the License at
|
||||
|
||||
http://www.apache.org/licenses/LICENSE-2.0
|
||||
|
||||
Unless required by applicable law or agreed to in writing, software
|
||||
distributed under the License is distributed on an "AS IS" BASIS,
|
||||
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
See the License for the specific language governing permissions and
|
||||
limitations under the License.
|
||||
*/
|
||||
|
||||
import { runBlockSchemaTests, runRenderTests } from '@lowdefy/block-dev';
|
||||
|
||||
import Block from './GithubColorSelector.js';
|
||||
import examples from './examples.yaml';
|
||||
import schema from './schema.json';
|
||||
|
||||
const testConfig = {
|
||||
validation: true,
|
||||
required: true,
|
||||
values: [],
|
||||
};
|
||||
|
||||
runRenderTests({ Block, examples, schema, testConfig });
|
||||
runBlockSchemaTests({ examples, schema });
|
||||
@ -1,157 +0,0 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`Mock render - colors - value[0] - GithubColorSelector 1`] = `
|
||||
Array [
|
||||
Array [
|
||||
Object {
|
||||
"className": "{\\"style\\":[{\\"marginBottom\\":\\"0px !important\\"},null]}",
|
||||
"color": "#000000",
|
||||
"colors": Array [
|
||||
"#123456",
|
||||
"#abc345",
|
||||
],
|
||||
"id": "colors_input",
|
||||
"onChangeComplete": [Function],
|
||||
"triangle": "hide",
|
||||
"width": "100%",
|
||||
},
|
||||
Object {},
|
||||
],
|
||||
]
|
||||
`;
|
||||
|
||||
exports[`Mock render - default - value[0] - GithubColorSelector 1`] = `
|
||||
Array [
|
||||
Array [
|
||||
Object {
|
||||
"className": "{\\"style\\":[{\\"marginBottom\\":\\"0px !important\\"},null]}",
|
||||
"color": "#000000",
|
||||
"colors": undefined,
|
||||
"id": "default_input",
|
||||
"onChangeComplete": [Function],
|
||||
"triangle": "hide",
|
||||
"width": "100%",
|
||||
},
|
||||
Object {},
|
||||
],
|
||||
]
|
||||
`;
|
||||
|
||||
exports[`Mock render - defaultColor - value[0] - GithubColorSelector 1`] = `
|
||||
Array [
|
||||
Array [
|
||||
Object {
|
||||
"className": "{\\"style\\":[{\\"marginBottom\\":\\"0px !important\\"},null]}",
|
||||
"color": "#FF0000",
|
||||
"colors": undefined,
|
||||
"id": "defaultColor_input",
|
||||
"onChangeComplete": [Function],
|
||||
"triangle": "hide",
|
||||
"width": "100%",
|
||||
},
|
||||
Object {},
|
||||
],
|
||||
]
|
||||
`;
|
||||
|
||||
exports[`Mock render - inputStyle - value[0] - GithubColorSelector 1`] = `
|
||||
Array [
|
||||
Array [
|
||||
Object {
|
||||
"className": "{\\"style\\":[{\\"marginBottom\\":\\"0px !important\\"},{\\"border\\":\\"3px solid blue\\"}]}",
|
||||
"color": "#000000",
|
||||
"colors": undefined,
|
||||
"id": "inputStyle_input",
|
||||
"onChangeComplete": [Function],
|
||||
"triangle": "hide",
|
||||
"width": "100%",
|
||||
},
|
||||
Object {},
|
||||
],
|
||||
]
|
||||
`;
|
||||
|
||||
exports[`Mock render - label-disabled - value[0] - GithubColorSelector 1`] = `
|
||||
Array [
|
||||
Array [
|
||||
Object {
|
||||
"className": "{\\"style\\":[{\\"marginBottom\\":\\"0px !important\\"},null]}",
|
||||
"color": "#000000",
|
||||
"colors": undefined,
|
||||
"id": "label-disabled_input",
|
||||
"onChangeComplete": [Function],
|
||||
"triangle": "hide",
|
||||
"width": "100%",
|
||||
},
|
||||
Object {},
|
||||
],
|
||||
]
|
||||
`;
|
||||
|
||||
exports[`Mock render - title - value[0] - GithubColorSelector 1`] = `
|
||||
Array [
|
||||
Array [
|
||||
Object {
|
||||
"className": "{\\"style\\":[{\\"marginBottom\\":\\"0px !important\\"},null]}",
|
||||
"color": "#000000",
|
||||
"colors": undefined,
|
||||
"id": "title_input",
|
||||
"onChangeComplete": [Function],
|
||||
"triangle": "hide",
|
||||
"width": "100%",
|
||||
},
|
||||
Object {},
|
||||
],
|
||||
]
|
||||
`;
|
||||
|
||||
exports[`Mock render - triangle-top-left - value[0] - GithubColorSelector 1`] = `
|
||||
Array [
|
||||
Array [
|
||||
Object {
|
||||
"className": "{\\"style\\":[{\\"marginBottom\\":\\"0px !important\\"},null]}",
|
||||
"color": "#000000",
|
||||
"colors": undefined,
|
||||
"id": "triangle-top-left_input",
|
||||
"onChangeComplete": [Function],
|
||||
"triangle": "top-left",
|
||||
"width": "100%",
|
||||
},
|
||||
Object {},
|
||||
],
|
||||
]
|
||||
`;
|
||||
|
||||
exports[`Mock render - triangle-top-right - value[0] - GithubColorSelector 1`] = `
|
||||
Array [
|
||||
Array [
|
||||
Object {
|
||||
"className": "{\\"style\\":[{\\"marginBottom\\":\\"0px !important\\"},null]}",
|
||||
"color": "#000000",
|
||||
"colors": undefined,
|
||||
"id": "triangle-top-right_input",
|
||||
"onChangeComplete": [Function],
|
||||
"triangle": "top-right",
|
||||
"width": "100%",
|
||||
},
|
||||
Object {},
|
||||
],
|
||||
]
|
||||
`;
|
||||
|
||||
exports[`Mock render - width - value[0] - GithubColorSelector 1`] = `
|
||||
Array [
|
||||
Array [
|
||||
Object {
|
||||
"className": "{\\"style\\":[{\\"marginBottom\\":\\"0px !important\\"},null]}",
|
||||
"color": "#000000",
|
||||
"colors": undefined,
|
||||
"id": "width_input",
|
||||
"onChangeComplete": [Function],
|
||||
"triangle": "hide",
|
||||
"width": 200,
|
||||
},
|
||||
Object {},
|
||||
],
|
||||
]
|
||||
`;
|
||||
File diff suppressed because it is too large
Load Diff
@ -1,50 +0,0 @@
|
||||
# Copyright 2020-2021 Lowdefy, Inc
|
||||
|
||||
# Licensed under the Apache License, Version 2.0 (the "License");
|
||||
# you may not use this file except in compliance with the License.
|
||||
# You may obtain a copy of the License at
|
||||
|
||||
# http://www.apache.org/licenses/LICENSE-2.0
|
||||
|
||||
# Unless required by applicable law or agreed to in writing, software
|
||||
# distributed under the License is distributed on an "AS IS" BASIS,
|
||||
# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
# See the License for the specific language governing permissions and
|
||||
# limitations under the License.
|
||||
|
||||
- id: default
|
||||
type: GithubColorSelector
|
||||
- id: title
|
||||
type: GithubColorSelector
|
||||
properties:
|
||||
title: The color selector
|
||||
- id: colors
|
||||
type: GithubColorSelector
|
||||
properties:
|
||||
colors: ['#123456', '#abc345']
|
||||
- id: defaultColor
|
||||
type: GithubColorSelector
|
||||
properties:
|
||||
defaultColor: '#FF0000'
|
||||
- id: triangle-top-left
|
||||
type: GithubColorSelector
|
||||
properties:
|
||||
triangle: top-left
|
||||
- id: triangle-top-right
|
||||
type: GithubColorSelector
|
||||
properties:
|
||||
triangle: top-right
|
||||
- id: width
|
||||
type: GithubColorSelector
|
||||
properties:
|
||||
width: 200
|
||||
- id: inputStyle
|
||||
type: GithubColorSelector
|
||||
properties:
|
||||
inputStyle:
|
||||
border: 3px solid blue
|
||||
- id: label-disabled
|
||||
type: GithubColorSelector
|
||||
properties:
|
||||
label:
|
||||
disabled: true
|
||||
@ -1,138 +0,0 @@
|
||||
{
|
||||
"type": "object",
|
||||
"properties": {
|
||||
"type": "object",
|
||||
"properties": {
|
||||
"colors": {
|
||||
"type": "array",
|
||||
"description": "Colors to display.",
|
||||
"default": [
|
||||
"#B80000",
|
||||
"#DB3E00",
|
||||
"#FCCB00",
|
||||
"#008B02",
|
||||
"#006B76",
|
||||
"#1273DE",
|
||||
"#004DCF",
|
||||
"#5300EB",
|
||||
"#EB9694",
|
||||
"#FAD0C3",
|
||||
"#FEF3BD",
|
||||
"#C1E1C5",
|
||||
"#BEDADC",
|
||||
"#C4DEF6",
|
||||
"#BED3F3",
|
||||
"#D4C4FB"
|
||||
],
|
||||
"items": {
|
||||
"type": "string",
|
||||
"docs": {
|
||||
"displayType": "color"
|
||||
}
|
||||
}
|
||||
},
|
||||
"defaultColor": {
|
||||
"type": "string",
|
||||
"default": "#000000",
|
||||
"description": "Default color to display if input value is null.",
|
||||
"docs": {
|
||||
"displayType": "color"
|
||||
}
|
||||
},
|
||||
"inputStyle": {
|
||||
"type": "object",
|
||||
"description": "Css style to applied to input.",
|
||||
"docs": {
|
||||
"displayType": "yaml"
|
||||
}
|
||||
},
|
||||
"label": {
|
||||
"type": "object",
|
||||
"description": "Label properties.",
|
||||
"additionalProperties": false,
|
||||
"properties": {
|
||||
"align": {
|
||||
"type": "string",
|
||||
"enum": ["left", "right"],
|
||||
"default": "left",
|
||||
"description": "Align label left or right when inline."
|
||||
},
|
||||
"colon": {
|
||||
"type": "boolean",
|
||||
"default": true,
|
||||
"description": "Append label with colon."
|
||||
},
|
||||
"extra": {
|
||||
"type": "string",
|
||||
"description": "Extra text to display beneath the content."
|
||||
},
|
||||
"title": {
|
||||
"type": "string",
|
||||
"description": "Label title."
|
||||
},
|
||||
"span": {
|
||||
"type": "number",
|
||||
"description": "Label inline span."
|
||||
},
|
||||
"disabled": {
|
||||
"type": "boolean",
|
||||
"default": false,
|
||||
"description": "Hide input label."
|
||||
},
|
||||
"hasFeedback": {
|
||||
"type": "boolean",
|
||||
"default": true,
|
||||
"description": "Display feedback extra from validation, this does not disable validation."
|
||||
},
|
||||
"inline": {
|
||||
"type": "boolean",
|
||||
"default": false,
|
||||
"description": "Render input and label inline."
|
||||
},
|
||||
"extraStyle": {
|
||||
"type": "object",
|
||||
"description": "Css style to applied to label extra.",
|
||||
"docs": {
|
||||
"displayType": "yaml"
|
||||
}
|
||||
},
|
||||
"feedbackStyle": {
|
||||
"type": "object",
|
||||
"description": "Css style to applied to label feedback.",
|
||||
"docs": {
|
||||
"displayType": "yaml"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"title": {
|
||||
"type": "string",
|
||||
"description": "Title to describe the input component, if no title is specified the block id is displayed."
|
||||
},
|
||||
"triangle": {
|
||||
"type": "string",
|
||||
"enum": ["hide", "top-left", "top-right"],
|
||||
"default": "hide",
|
||||
"description": "Show triangle on color selector border."
|
||||
},
|
||||
"width": {
|
||||
"type": ["string", "number"],
|
||||
"description": "Color selector width.",
|
||||
"default": "100%",
|
||||
"docs": {
|
||||
"displayType": "string"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"events": {
|
||||
"type": "object",
|
||||
"additionalProperties": false,
|
||||
"properties": {
|
||||
"onChange": {
|
||||
"type": "array",
|
||||
"description": "Trigger actions when color is picked."
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,17 +0,0 @@
|
||||
/*
|
||||
Copyright 2020-2021 Lowdefy, Inc
|
||||
|
||||
Licensed under the Apache License, Version 2.0 (the "License");
|
||||
you may not use this file except in compliance with the License.
|
||||
You may obtain a copy of the License at
|
||||
|
||||
http://www.apache.org/licenses/LICENSE-2.0
|
||||
|
||||
Unless required by applicable law or agreed to in writing, software
|
||||
distributed under the License is distributed on an "AS IS" BASIS,
|
||||
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
See the License for the specific language governing permissions and
|
||||
limitations under the License.
|
||||
*/
|
||||
|
||||
@import '@lowdefy/blocks-antd/blocks/Label/style.less';
|
||||
@ -1,65 +0,0 @@
|
||||
/*
|
||||
Copyright 2020-2021 Lowdefy, Inc
|
||||
|
||||
Licensed under the Apache License, Version 2.0 (the "License");
|
||||
you may not use this file except in compliance with the License.
|
||||
You may obtain a copy of the License at
|
||||
|
||||
http://www.apache.org/licenses/LICENSE-2.0
|
||||
|
||||
Unless required by applicable law or agreed to in writing, software
|
||||
distributed under the License is distributed on an "AS IS" BASIS,
|
||||
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
See the License for the specific language governing permissions and
|
||||
limitations under the License.
|
||||
*/
|
||||
|
||||
import React from 'react';
|
||||
import SliderPicker from 'react-color/lib/Slider.js';
|
||||
import { blockDefaultProps } from '@lowdefy/block-utils';
|
||||
import Label from '@lowdefy/blocks-antd/blocks/Label/Label.js';
|
||||
|
||||
const Selector = ({ blockId, loading, methods, properties, required, validation, value }) => {
|
||||
return (
|
||||
<Label
|
||||
blockId={blockId}
|
||||
loading={loading}
|
||||
methods={methods}
|
||||
properties={{ title: properties.title, size: properties.size, ...properties.label }}
|
||||
required={required}
|
||||
validation={validation}
|
||||
content={{
|
||||
content: () => (
|
||||
<SliderPicker
|
||||
id={`${blockId}_input`}
|
||||
className={methods.makeCssClass([
|
||||
{ marginBottom: '0px !important' },
|
||||
properties.inputStyle,
|
||||
])}
|
||||
color={value || properties.defaultColor || '#000000'}
|
||||
onChangeComplete={(color) => {
|
||||
methods.setValue(color.hex ? color.hex : '#000000');
|
||||
methods.triggerEvent({ name: 'onChange' });
|
||||
}}
|
||||
/>
|
||||
),
|
||||
}}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
Selector.defaultProps = blockDefaultProps;
|
||||
Selector.meta = {
|
||||
valueType: 'string',
|
||||
category: 'input',
|
||||
loading: {
|
||||
type: 'Skeleton',
|
||||
properties: {
|
||||
height: 44,
|
||||
},
|
||||
},
|
||||
icons: [...Label.meta.icons],
|
||||
styles: ['blocks/SliderColorSelector/style.less'],
|
||||
};
|
||||
|
||||
export default Selector;
|
||||
@ -1,50 +0,0 @@
|
||||
/*
|
||||
Copyright 2020-2021 Lowdefy, Inc
|
||||
|
||||
Licensed under the Apache License, Version 2.0 (the "License");
|
||||
you may not use this file except in compliance with the License.
|
||||
You may obtain a copy of the License at
|
||||
|
||||
http://www.apache.org/licenses/LICENSE-2.0
|
||||
|
||||
Unless required by applicable law or agreed to in writing, software
|
||||
distributed under the License is distributed on an "AS IS" BASIS,
|
||||
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
See the License for the specific language governing permissions and
|
||||
limitations under the License.
|
||||
*/
|
||||
|
||||
import { runMockRenderTests } from '@lowdefy/block-dev';
|
||||
|
||||
import Block from './SliderColorSelector.js';
|
||||
import examples from './examples.yaml';
|
||||
import schema from './schema.json';
|
||||
|
||||
const testConfig = {
|
||||
validation: true,
|
||||
required: true,
|
||||
values: [],
|
||||
};
|
||||
|
||||
jest.mock('react-color', () => {
|
||||
const selectors = {
|
||||
SliderPicker: jest.fn(() => 'mocked'),
|
||||
};
|
||||
return selectors;
|
||||
});
|
||||
|
||||
const mocks = [
|
||||
{
|
||||
getMockFns: async () => {
|
||||
const antd = await import('react-color');
|
||||
return [antd.SliderPicker];
|
||||
},
|
||||
getBlock: async () => {
|
||||
const Block = await import('./SliderColorSelector.js');
|
||||
return Block.default;
|
||||
},
|
||||
name: 'SliderColorSelector',
|
||||
},
|
||||
];
|
||||
|
||||
runMockRenderTests({ Block, examples, mocks, schema, testConfig });
|
||||
@ -1,30 +0,0 @@
|
||||
/*
|
||||
Copyright 2020-2021 Lowdefy, Inc
|
||||
|
||||
Licensed under the Apache License, Version 2.0 (the "License");
|
||||
you may not use this file except in compliance with the License.
|
||||
You may obtain a copy of the License at
|
||||
|
||||
http://www.apache.org/licenses/LICENSE-2.0
|
||||
|
||||
Unless required by applicable law or agreed to in writing, software
|
||||
distributed under the License is distributed on an "AS IS" BASIS,
|
||||
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
See the License for the specific language governing permissions and
|
||||
limitations under the License.
|
||||
*/
|
||||
|
||||
import { runBlockSchemaTests, runRenderTests } from '@lowdefy/block-dev';
|
||||
|
||||
import Block from './SliderColorSelector.js';
|
||||
import examples from './examples.yaml';
|
||||
import schema from './schema.json';
|
||||
|
||||
const testConfig = {
|
||||
validation: true,
|
||||
required: true,
|
||||
values: [],
|
||||
};
|
||||
|
||||
runRenderTests({ Block, examples, schema, testConfig });
|
||||
runBlockSchemaTests({ examples, schema });
|
||||
@ -1,85 +0,0 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`Mock render - colors - value[0] - SliderColorSelector 1`] = `
|
||||
Array [
|
||||
Array [
|
||||
Object {
|
||||
"className": "{\\"style\\":[{\\"marginBottom\\":\\"0px !important\\"},null]}",
|
||||
"color": "#000000",
|
||||
"id": "colors_input",
|
||||
"onChangeComplete": [Function],
|
||||
},
|
||||
Object {},
|
||||
],
|
||||
]
|
||||
`;
|
||||
|
||||
exports[`Mock render - default - value[0] - SliderColorSelector 1`] = `
|
||||
Array [
|
||||
Array [
|
||||
Object {
|
||||
"className": "{\\"style\\":[{\\"marginBottom\\":\\"0px !important\\"},null]}",
|
||||
"color": "#000000",
|
||||
"id": "default_input",
|
||||
"onChangeComplete": [Function],
|
||||
},
|
||||
Object {},
|
||||
],
|
||||
]
|
||||
`;
|
||||
|
||||
exports[`Mock render - defaultColor - value[0] - SliderColorSelector 1`] = `
|
||||
Array [
|
||||
Array [
|
||||
Object {
|
||||
"className": "{\\"style\\":[{\\"marginBottom\\":\\"0px !important\\"},null]}",
|
||||
"color": "#11FF00",
|
||||
"id": "defaultColor_input",
|
||||
"onChangeComplete": [Function],
|
||||
},
|
||||
Object {},
|
||||
],
|
||||
]
|
||||
`;
|
||||
|
||||
exports[`Mock render - inputStyle - value[0] - SliderColorSelector 1`] = `
|
||||
Array [
|
||||
Array [
|
||||
Object {
|
||||
"className": "{\\"style\\":[{\\"marginBottom\\":\\"0px !important\\"},{\\"border\\":\\"3px solid blue\\"}]}",
|
||||
"color": "#000000",
|
||||
"id": "inputStyle_input",
|
||||
"onChangeComplete": [Function],
|
||||
},
|
||||
Object {},
|
||||
],
|
||||
]
|
||||
`;
|
||||
|
||||
exports[`Mock render - label-disabled - value[0] - SliderColorSelector 1`] = `
|
||||
Array [
|
||||
Array [
|
||||
Object {
|
||||
"className": "{\\"style\\":[{\\"marginBottom\\":\\"0px !important\\"},null]}",
|
||||
"color": "#000000",
|
||||
"id": "label-disabled_input",
|
||||
"onChangeComplete": [Function],
|
||||
},
|
||||
Object {},
|
||||
],
|
||||
]
|
||||
`;
|
||||
|
||||
exports[`Mock render - title - value[0] - SliderColorSelector 1`] = `
|
||||
Array [
|
||||
Array [
|
||||
Object {
|
||||
"className": "{\\"style\\":[{\\"marginBottom\\":\\"0px !important\\"},null]}",
|
||||
"color": "#000000",
|
||||
"id": "title_input",
|
||||
"onChangeComplete": [Function],
|
||||
},
|
||||
Object {},
|
||||
],
|
||||
]
|
||||
`;
|
||||
@ -1,839 +0,0 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`Render colors - value[0] 1`] = `
|
||||
.emotion-0 {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.emotion-1 {
|
||||
white-space: normal;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.emotion-2 {
|
||||
height: -webkit-fit-content!important;
|
||||
height: -moz-fit-content!important;
|
||||
height: fit-content!important;
|
||||
min-height: 32px;
|
||||
}
|
||||
|
||||
.emotion-4 {
|
||||
margin-bottom: 0px!important;
|
||||
}
|
||||
|
||||
<div
|
||||
class="ant-row ant-form-item emotion-0"
|
||||
id="colors"
|
||||
>
|
||||
<div
|
||||
class="ant-col ant-form-item-label ant-form-item-label-left emotion-1 ant-col-xs-24 ant-col-sm-24"
|
||||
>
|
||||
<label
|
||||
class="emotion-2"
|
||||
for="colors_input"
|
||||
title="colors"
|
||||
>
|
||||
<span
|
||||
class="emotion-3"
|
||||
>
|
||||
colors
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
<div
|
||||
class="ant-col ant-form-item-control ant-col-xs-24 ant-col-sm-24"
|
||||
>
|
||||
<div
|
||||
class="ant-form-item-control-input"
|
||||
>
|
||||
<div
|
||||
class="ant-form-item-control-input-content"
|
||||
>
|
||||
<div
|
||||
class="slider-picker emotion-4"
|
||||
>
|
||||
<div
|
||||
style="height: 12px; position: relative;"
|
||||
>
|
||||
<div
|
||||
style="position: absolute; top: 0px; right: 0px; bottom: 0px; left: 0px;"
|
||||
>
|
||||
<div
|
||||
class="hue-horizontal"
|
||||
style="padding: 0px 2px; position: relative; height: 100%;"
|
||||
>
|
||||
<style>
|
||||
|
||||
.hue-horizontal {
|
||||
background: linear-gradient(to right, #f00 0%, #ff0 17%, #0f0
|
||||
33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%);
|
||||
background: -webkit-linear-gradient(to right, #f00 0%, #ff0
|
||||
17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%);
|
||||
}
|
||||
|
||||
.hue-vertical {
|
||||
background: linear-gradient(to top, #f00 0%, #ff0 17%, #0f0 33%,
|
||||
#0ff 50%, #00f 67%, #f0f 83%, #f00 100%);
|
||||
background: -webkit-linear-gradient(to top, #f00 0%, #ff0 17%,
|
||||
#0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%);
|
||||
}
|
||||
|
||||
</style>
|
||||
<div
|
||||
style="position: absolute; left: 0%;"
|
||||
>
|
||||
<div
|
||||
style="width: 14px; height: 14px; border-radius: 6px; transform: translate(-7px, -1px); background-color: rgb(248, 248, 248); box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.37);"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div
|
||||
style="margin-top: 20px;"
|
||||
>
|
||||
<div
|
||||
style="box-sizing: border-box; width: 20%; padding-right: 1px; float: left;"
|
||||
>
|
||||
<div
|
||||
style="height: 12px; background: rgb(230, 179, 179); cursor: pointer; border-radius: 2px 0 0 2px;"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
style="box-sizing: border-box; width: 20%; padding-right: 1px; float: left;"
|
||||
>
|
||||
<div
|
||||
style="height: 12px; background: rgb(210, 121, 121); cursor: pointer;"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
style="box-sizing: border-box; width: 20%; padding-right: 1px; float: left;"
|
||||
>
|
||||
<div
|
||||
style="height: 12px; background: rgb(191, 64, 64); cursor: pointer;"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
style="box-sizing: border-box; width: 20%; padding-right: 1px; float: left;"
|
||||
>
|
||||
<div
|
||||
style="height: 12px; background: rgb(134, 45, 45); cursor: pointer;"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
style="box-sizing: border-box; width: 20%; padding-right: 1px; float: left;"
|
||||
>
|
||||
<div
|
||||
style="height: 12px; background: rgb(77, 25, 25); cursor: pointer; border-radius: 0 2px 2px 0;"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
style="clear: both;"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`Render default - value[0] 1`] = `
|
||||
.emotion-0 {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.emotion-1 {
|
||||
white-space: normal;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.emotion-2 {
|
||||
height: -webkit-fit-content!important;
|
||||
height: -moz-fit-content!important;
|
||||
height: fit-content!important;
|
||||
min-height: 32px;
|
||||
}
|
||||
|
||||
.emotion-4 {
|
||||
margin-bottom: 0px!important;
|
||||
}
|
||||
|
||||
<div
|
||||
class="ant-row ant-form-item emotion-0"
|
||||
id="default"
|
||||
>
|
||||
<div
|
||||
class="ant-col ant-form-item-label ant-form-item-label-left emotion-1 ant-col-xs-24 ant-col-sm-24"
|
||||
>
|
||||
<label
|
||||
class="emotion-2"
|
||||
for="default_input"
|
||||
title="default"
|
||||
>
|
||||
<span
|
||||
class="emotion-3"
|
||||
>
|
||||
default
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
<div
|
||||
class="ant-col ant-form-item-control ant-col-xs-24 ant-col-sm-24"
|
||||
>
|
||||
<div
|
||||
class="ant-form-item-control-input"
|
||||
>
|
||||
<div
|
||||
class="ant-form-item-control-input-content"
|
||||
>
|
||||
<div
|
||||
class="slider-picker emotion-4"
|
||||
>
|
||||
<div
|
||||
style="height: 12px; position: relative;"
|
||||
>
|
||||
<div
|
||||
style="position: absolute; top: 0px; right: 0px; bottom: 0px; left: 0px;"
|
||||
>
|
||||
<div
|
||||
class="hue-horizontal"
|
||||
style="padding: 0px 2px; position: relative; height: 100%;"
|
||||
>
|
||||
<style>
|
||||
|
||||
.hue-horizontal {
|
||||
background: linear-gradient(to right, #f00 0%, #ff0 17%, #0f0
|
||||
33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%);
|
||||
background: -webkit-linear-gradient(to right, #f00 0%, #ff0
|
||||
17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%);
|
||||
}
|
||||
|
||||
.hue-vertical {
|
||||
background: linear-gradient(to top, #f00 0%, #ff0 17%, #0f0 33%,
|
||||
#0ff 50%, #00f 67%, #f0f 83%, #f00 100%);
|
||||
background: -webkit-linear-gradient(to top, #f00 0%, #ff0 17%,
|
||||
#0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%);
|
||||
}
|
||||
|
||||
</style>
|
||||
<div
|
||||
style="position: absolute; left: 0%;"
|
||||
>
|
||||
<div
|
||||
style="width: 14px; height: 14px; border-radius: 6px; transform: translate(-7px, -1px); background-color: rgb(248, 248, 248); box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.37);"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div
|
||||
style="margin-top: 20px;"
|
||||
>
|
||||
<div
|
||||
style="box-sizing: border-box; width: 20%; padding-right: 1px; float: left;"
|
||||
>
|
||||
<div
|
||||
style="height: 12px; background: rgb(230, 179, 179); cursor: pointer; border-radius: 2px 0 0 2px;"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
style="box-sizing: border-box; width: 20%; padding-right: 1px; float: left;"
|
||||
>
|
||||
<div
|
||||
style="height: 12px; background: rgb(210, 121, 121); cursor: pointer;"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
style="box-sizing: border-box; width: 20%; padding-right: 1px; float: left;"
|
||||
>
|
||||
<div
|
||||
style="height: 12px; background: rgb(191, 64, 64); cursor: pointer;"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
style="box-sizing: border-box; width: 20%; padding-right: 1px; float: left;"
|
||||
>
|
||||
<div
|
||||
style="height: 12px; background: rgb(134, 45, 45); cursor: pointer;"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
style="box-sizing: border-box; width: 20%; padding-right: 1px; float: left;"
|
||||
>
|
||||
<div
|
||||
style="height: 12px; background: rgb(77, 25, 25); cursor: pointer; border-radius: 0 2px 2px 0;"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
style="clear: both;"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`Render defaultColor - value[0] 1`] = `
|
||||
.emotion-0 {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.emotion-1 {
|
||||
white-space: normal;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.emotion-2 {
|
||||
height: -webkit-fit-content!important;
|
||||
height: -moz-fit-content!important;
|
||||
height: fit-content!important;
|
||||
min-height: 32px;
|
||||
}
|
||||
|
||||
.emotion-4 {
|
||||
margin-bottom: 0px!important;
|
||||
}
|
||||
|
||||
<div
|
||||
class="ant-row ant-form-item emotion-0"
|
||||
id="defaultColor"
|
||||
>
|
||||
<div
|
||||
class="ant-col ant-form-item-label ant-form-item-label-left emotion-1 ant-col-xs-24 ant-col-sm-24"
|
||||
>
|
||||
<label
|
||||
class="emotion-2"
|
||||
for="defaultColor_input"
|
||||
title="defaultColor"
|
||||
>
|
||||
<span
|
||||
class="emotion-3"
|
||||
>
|
||||
defaultColor
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
<div
|
||||
class="ant-col ant-form-item-control ant-col-xs-24 ant-col-sm-24"
|
||||
>
|
||||
<div
|
||||
class="ant-form-item-control-input"
|
||||
>
|
||||
<div
|
||||
class="ant-form-item-control-input-content"
|
||||
>
|
||||
<div
|
||||
class="slider-picker emotion-4"
|
||||
>
|
||||
<div
|
||||
style="height: 12px; position: relative;"
|
||||
>
|
||||
<div
|
||||
style="position: absolute; top: 0px; right: 0px; bottom: 0px; left: 0px;"
|
||||
>
|
||||
<div
|
||||
class="hue-horizontal"
|
||||
style="padding: 0px 2px; position: relative; height: 100%;"
|
||||
>
|
||||
<style>
|
||||
|
||||
.hue-horizontal {
|
||||
background: linear-gradient(to right, #f00 0%, #ff0 17%, #0f0
|
||||
33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%);
|
||||
background: -webkit-linear-gradient(to right, #f00 0%, #ff0
|
||||
17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%);
|
||||
}
|
||||
|
||||
.hue-vertical {
|
||||
background: linear-gradient(to top, #f00 0%, #ff0 17%, #0f0 33%,
|
||||
#0ff 50%, #00f 67%, #f0f 83%, #f00 100%);
|
||||
background: -webkit-linear-gradient(to top, #f00 0%, #ff0 17%,
|
||||
#0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%);
|
||||
}
|
||||
|
||||
</style>
|
||||
<div
|
||||
style="position: absolute; left: 32.22222222222223%;"
|
||||
>
|
||||
<div
|
||||
style="width: 14px; height: 14px; border-radius: 6px; transform: translate(-7px, -1px); background-color: rgb(248, 248, 248); box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.37);"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div
|
||||
style="margin-top: 20px;"
|
||||
>
|
||||
<div
|
||||
style="box-sizing: border-box; width: 20%; padding-right: 1px; float: left;"
|
||||
>
|
||||
<div
|
||||
style="height: 12px; background: rgb(179, 179, 179); cursor: pointer; border-radius: 2px 0 0 2px;"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
style="box-sizing: border-box; width: 20%; padding-right: 1px; float: left;"
|
||||
>
|
||||
<div
|
||||
style="height: 12px; background: rgb(121, 121, 121); cursor: pointer;"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
style="box-sizing: border-box; width: 20%; padding-right: 1px; float: left;"
|
||||
>
|
||||
<div
|
||||
style="height: 12px; background: rgb(64, 64, 64); cursor: pointer;"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
style="box-sizing: border-box; width: 20%; padding-right: 1px; float: left;"
|
||||
>
|
||||
<div
|
||||
style="height: 12px; background: rgb(45, 45, 45); cursor: pointer;"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
style="box-sizing: border-box; width: 20%; padding-right: 1px; float: left;"
|
||||
>
|
||||
<div
|
||||
style="height: 12px; background: rgb(25, 25, 25); cursor: pointer; border-radius: 0 2px 2px 0;"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
style="clear: both;"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`Render inputStyle - value[0] 1`] = `
|
||||
.emotion-0 {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.emotion-1 {
|
||||
white-space: normal;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.emotion-2 {
|
||||
height: -webkit-fit-content!important;
|
||||
height: -moz-fit-content!important;
|
||||
height: fit-content!important;
|
||||
min-height: 32px;
|
||||
}
|
||||
|
||||
.emotion-4 {
|
||||
margin-bottom: 0px!important;
|
||||
border: 3px solid blue;
|
||||
}
|
||||
|
||||
<div
|
||||
class="ant-row ant-form-item emotion-0"
|
||||
id="inputStyle"
|
||||
>
|
||||
<div
|
||||
class="ant-col ant-form-item-label ant-form-item-label-left emotion-1 ant-col-xs-24 ant-col-sm-24"
|
||||
>
|
||||
<label
|
||||
class="emotion-2"
|
||||
for="inputStyle_input"
|
||||
title="inputStyle"
|
||||
>
|
||||
<span
|
||||
class="emotion-3"
|
||||
>
|
||||
inputStyle
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
<div
|
||||
class="ant-col ant-form-item-control ant-col-xs-24 ant-col-sm-24"
|
||||
>
|
||||
<div
|
||||
class="ant-form-item-control-input"
|
||||
>
|
||||
<div
|
||||
class="ant-form-item-control-input-content"
|
||||
>
|
||||
<div
|
||||
class="slider-picker emotion-4"
|
||||
>
|
||||
<div
|
||||
style="height: 12px; position: relative;"
|
||||
>
|
||||
<div
|
||||
style="position: absolute; top: 0px; right: 0px; bottom: 0px; left: 0px;"
|
||||
>
|
||||
<div
|
||||
class="hue-horizontal"
|
||||
style="padding: 0px 2px; position: relative; height: 100%;"
|
||||
>
|
||||
<style>
|
||||
|
||||
.hue-horizontal {
|
||||
background: linear-gradient(to right, #f00 0%, #ff0 17%, #0f0
|
||||
33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%);
|
||||
background: -webkit-linear-gradient(to right, #f00 0%, #ff0
|
||||
17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%);
|
||||
}
|
||||
|
||||
.hue-vertical {
|
||||
background: linear-gradient(to top, #f00 0%, #ff0 17%, #0f0 33%,
|
||||
#0ff 50%, #00f 67%, #f0f 83%, #f00 100%);
|
||||
background: -webkit-linear-gradient(to top, #f00 0%, #ff0 17%,
|
||||
#0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%);
|
||||
}
|
||||
|
||||
</style>
|
||||
<div
|
||||
style="position: absolute; left: 0%;"
|
||||
>
|
||||
<div
|
||||
style="width: 14px; height: 14px; border-radius: 6px; transform: translate(-7px, -1px); background-color: rgb(248, 248, 248); box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.37);"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div
|
||||
style="margin-top: 20px;"
|
||||
>
|
||||
<div
|
||||
style="box-sizing: border-box; width: 20%; padding-right: 1px; float: left;"
|
||||
>
|
||||
<div
|
||||
style="height: 12px; background: rgb(230, 179, 179); cursor: pointer; border-radius: 2px 0 0 2px;"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
style="box-sizing: border-box; width: 20%; padding-right: 1px; float: left;"
|
||||
>
|
||||
<div
|
||||
style="height: 12px; background: rgb(210, 121, 121); cursor: pointer;"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
style="box-sizing: border-box; width: 20%; padding-right: 1px; float: left;"
|
||||
>
|
||||
<div
|
||||
style="height: 12px; background: rgb(191, 64, 64); cursor: pointer;"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
style="box-sizing: border-box; width: 20%; padding-right: 1px; float: left;"
|
||||
>
|
||||
<div
|
||||
style="height: 12px; background: rgb(134, 45, 45); cursor: pointer;"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
style="box-sizing: border-box; width: 20%; padding-right: 1px; float: left;"
|
||||
>
|
||||
<div
|
||||
style="height: 12px; background: rgb(77, 25, 25); cursor: pointer; border-radius: 0 2px 2px 0;"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
style="clear: both;"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`Render label-disabled - value[0] 1`] = `
|
||||
.emotion-0 {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.emotion-1 {
|
||||
margin-bottom: 0px!important;
|
||||
}
|
||||
|
||||
<div
|
||||
class="ant-row ant-form-item emotion-0"
|
||||
id="label-disabled"
|
||||
>
|
||||
<div
|
||||
class="ant-col ant-form-item-control ant-col-xs-24 ant-col-sm-24"
|
||||
>
|
||||
<div
|
||||
class="ant-form-item-control-input"
|
||||
>
|
||||
<div
|
||||
class="ant-form-item-control-input-content"
|
||||
>
|
||||
<div
|
||||
class="slider-picker emotion-1"
|
||||
>
|
||||
<div
|
||||
style="height: 12px; position: relative;"
|
||||
>
|
||||
<div
|
||||
style="position: absolute; top: 0px; right: 0px; bottom: 0px; left: 0px;"
|
||||
>
|
||||
<div
|
||||
class="hue-horizontal"
|
||||
style="padding: 0px 2px; position: relative; height: 100%;"
|
||||
>
|
||||
<style>
|
||||
|
||||
.hue-horizontal {
|
||||
background: linear-gradient(to right, #f00 0%, #ff0 17%, #0f0
|
||||
33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%);
|
||||
background: -webkit-linear-gradient(to right, #f00 0%, #ff0
|
||||
17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%);
|
||||
}
|
||||
|
||||
.hue-vertical {
|
||||
background: linear-gradient(to top, #f00 0%, #ff0 17%, #0f0 33%,
|
||||
#0ff 50%, #00f 67%, #f0f 83%, #f00 100%);
|
||||
background: -webkit-linear-gradient(to top, #f00 0%, #ff0 17%,
|
||||
#0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%);
|
||||
}
|
||||
|
||||
</style>
|
||||
<div
|
||||
style="position: absolute; left: 0%;"
|
||||
>
|
||||
<div
|
||||
style="width: 14px; height: 14px; border-radius: 6px; transform: translate(-7px, -1px); background-color: rgb(248, 248, 248); box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.37);"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div
|
||||
style="margin-top: 20px;"
|
||||
>
|
||||
<div
|
||||
style="box-sizing: border-box; width: 20%; padding-right: 1px; float: left;"
|
||||
>
|
||||
<div
|
||||
style="height: 12px; background: rgb(230, 179, 179); cursor: pointer; border-radius: 2px 0 0 2px;"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
style="box-sizing: border-box; width: 20%; padding-right: 1px; float: left;"
|
||||
>
|
||||
<div
|
||||
style="height: 12px; background: rgb(210, 121, 121); cursor: pointer;"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
style="box-sizing: border-box; width: 20%; padding-right: 1px; float: left;"
|
||||
>
|
||||
<div
|
||||
style="height: 12px; background: rgb(191, 64, 64); cursor: pointer;"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
style="box-sizing: border-box; width: 20%; padding-right: 1px; float: left;"
|
||||
>
|
||||
<div
|
||||
style="height: 12px; background: rgb(134, 45, 45); cursor: pointer;"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
style="box-sizing: border-box; width: 20%; padding-right: 1px; float: left;"
|
||||
>
|
||||
<div
|
||||
style="height: 12px; background: rgb(77, 25, 25); cursor: pointer; border-radius: 0 2px 2px 0;"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
style="clear: both;"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`Render title - value[0] 1`] = `
|
||||
.emotion-0 {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.emotion-1 {
|
||||
white-space: normal;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.emotion-2 {
|
||||
height: -webkit-fit-content!important;
|
||||
height: -moz-fit-content!important;
|
||||
height: fit-content!important;
|
||||
min-height: 32px;
|
||||
}
|
||||
|
||||
.emotion-4 {
|
||||
margin-bottom: 0px!important;
|
||||
}
|
||||
|
||||
<div
|
||||
class="ant-row ant-form-item emotion-0"
|
||||
id="title"
|
||||
>
|
||||
<div
|
||||
class="ant-col ant-form-item-label ant-form-item-label-left emotion-1 ant-col-xs-24 ant-col-sm-24"
|
||||
>
|
||||
<label
|
||||
class="emotion-2"
|
||||
for="title_input"
|
||||
title="The color selector"
|
||||
>
|
||||
<span
|
||||
class="emotion-3"
|
||||
>
|
||||
The color selector
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
<div
|
||||
class="ant-col ant-form-item-control ant-col-xs-24 ant-col-sm-24"
|
||||
>
|
||||
<div
|
||||
class="ant-form-item-control-input"
|
||||
>
|
||||
<div
|
||||
class="ant-form-item-control-input-content"
|
||||
>
|
||||
<div
|
||||
class="slider-picker emotion-4"
|
||||
>
|
||||
<div
|
||||
style="height: 12px; position: relative;"
|
||||
>
|
||||
<div
|
||||
style="position: absolute; top: 0px; right: 0px; bottom: 0px; left: 0px;"
|
||||
>
|
||||
<div
|
||||
class="hue-horizontal"
|
||||
style="padding: 0px 2px; position: relative; height: 100%;"
|
||||
>
|
||||
<style>
|
||||
|
||||
.hue-horizontal {
|
||||
background: linear-gradient(to right, #f00 0%, #ff0 17%, #0f0
|
||||
33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%);
|
||||
background: -webkit-linear-gradient(to right, #f00 0%, #ff0
|
||||
17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%);
|
||||
}
|
||||
|
||||
.hue-vertical {
|
||||
background: linear-gradient(to top, #f00 0%, #ff0 17%, #0f0 33%,
|
||||
#0ff 50%, #00f 67%, #f0f 83%, #f00 100%);
|
||||
background: -webkit-linear-gradient(to top, #f00 0%, #ff0 17%,
|
||||
#0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%);
|
||||
}
|
||||
|
||||
</style>
|
||||
<div
|
||||
style="position: absolute; left: 0%;"
|
||||
>
|
||||
<div
|
||||
style="width: 14px; height: 14px; border-radius: 6px; transform: translate(-7px, -1px); background-color: rgb(248, 248, 248); box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.37);"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div
|
||||
style="margin-top: 20px;"
|
||||
>
|
||||
<div
|
||||
style="box-sizing: border-box; width: 20%; padding-right: 1px; float: left;"
|
||||
>
|
||||
<div
|
||||
style="height: 12px; background: rgb(230, 179, 179); cursor: pointer; border-radius: 2px 0 0 2px;"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
style="box-sizing: border-box; width: 20%; padding-right: 1px; float: left;"
|
||||
>
|
||||
<div
|
||||
style="height: 12px; background: rgb(210, 121, 121); cursor: pointer;"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
style="box-sizing: border-box; width: 20%; padding-right: 1px; float: left;"
|
||||
>
|
||||
<div
|
||||
style="height: 12px; background: rgb(191, 64, 64); cursor: pointer;"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
style="box-sizing: border-box; width: 20%; padding-right: 1px; float: left;"
|
||||
>
|
||||
<div
|
||||
style="height: 12px; background: rgb(134, 45, 45); cursor: pointer;"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
style="box-sizing: border-box; width: 20%; padding-right: 1px; float: left;"
|
||||
>
|
||||
<div
|
||||
style="height: 12px; background: rgb(77, 25, 25); cursor: pointer; border-radius: 0 2px 2px 0;"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
style="clear: both;"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`Test Schema colors 1`] = `true`;
|
||||
|
||||
exports[`Test Schema colors 2`] = `null`;
|
||||
|
||||
exports[`Test Schema default 1`] = `true`;
|
||||
|
||||
exports[`Test Schema default 2`] = `null`;
|
||||
|
||||
exports[`Test Schema defaultColor 1`] = `true`;
|
||||
|
||||
exports[`Test Schema defaultColor 2`] = `null`;
|
||||
|
||||
exports[`Test Schema inputStyle 1`] = `true`;
|
||||
|
||||
exports[`Test Schema inputStyle 2`] = `null`;
|
||||
|
||||
exports[`Test Schema label-disabled 1`] = `true`;
|
||||
|
||||
exports[`Test Schema label-disabled 2`] = `null`;
|
||||
|
||||
exports[`Test Schema title 1`] = `true`;
|
||||
|
||||
exports[`Test Schema title 2`] = `null`;
|
||||
@ -1,38 +0,0 @@
|
||||
# Copyright 2020-2021 Lowdefy, Inc
|
||||
|
||||
# Licensed under the Apache License, Version 2.0 (the "License");
|
||||
# you may not use this file except in compliance with the License.
|
||||
# You may obtain a copy of the License at
|
||||
|
||||
# http://www.apache.org/licenses/LICENSE-2.0
|
||||
|
||||
# Unless required by applicable law or agreed to in writing, software
|
||||
# distributed under the License is distributed on an "AS IS" BASIS,
|
||||
# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
# See the License for the specific language governing permissions and
|
||||
# limitations under the License.
|
||||
|
||||
- id: default
|
||||
type: SliderColorSelector
|
||||
- id: title
|
||||
type: SliderColorSelector
|
||||
properties:
|
||||
title: The color selector
|
||||
- id: colors
|
||||
type: SliderColorSelector
|
||||
properties:
|
||||
colors: ['#123456', '#abc345']
|
||||
- id: defaultColor
|
||||
type: SliderColorSelector
|
||||
properties:
|
||||
defaultColor: '#11FF00'
|
||||
- id: inputStyle
|
||||
type: SliderColorSelector
|
||||
properties:
|
||||
inputStyle:
|
||||
border: 3px solid blue
|
||||
- id: label-disabled
|
||||
type: SliderColorSelector
|
||||
properties:
|
||||
label:
|
||||
disabled: true
|
||||
@ -1,96 +0,0 @@
|
||||
{
|
||||
"type": "object",
|
||||
"properties": {
|
||||
"type": "object",
|
||||
"properties": {
|
||||
"defaultColor": {
|
||||
"type": "string",
|
||||
"default": "#000000",
|
||||
"description": "Default color to display if input value is null.",
|
||||
"docs": {
|
||||
"displayType": "color"
|
||||
}
|
||||
},
|
||||
"inputStyle": {
|
||||
"type": "object",
|
||||
"description": "Css style to applied to input.",
|
||||
"docs": {
|
||||
"displayType": "yaml"
|
||||
}
|
||||
},
|
||||
"label": {
|
||||
"type": "object",
|
||||
"description": "Label properties.",
|
||||
"additionalProperties": false,
|
||||
"properties": {
|
||||
"align": {
|
||||
"type": "string",
|
||||
"enum": ["left", "right"],
|
||||
"default": "left",
|
||||
"description": "Align label left or right when inline."
|
||||
},
|
||||
"colon": {
|
||||
"type": "boolean",
|
||||
"default": true,
|
||||
"description": "Append label with colon."
|
||||
},
|
||||
"extra": {
|
||||
"type": "string",
|
||||
"description": "Extra text to display beneath the content."
|
||||
},
|
||||
"title": {
|
||||
"type": "string",
|
||||
"description": "Label title."
|
||||
},
|
||||
"span": {
|
||||
"type": "number",
|
||||
"description": "Label inline span."
|
||||
},
|
||||
"disabled": {
|
||||
"type": "boolean",
|
||||
"default": false,
|
||||
"description": "Hide input label."
|
||||
},
|
||||
"hasFeedback": {
|
||||
"type": "boolean",
|
||||
"default": true,
|
||||
"description": "Display feedback extra from validation, this does not disable validation."
|
||||
},
|
||||
"inline": {
|
||||
"type": "boolean",
|
||||
"default": false,
|
||||
"description": "Render input and label inline."
|
||||
},
|
||||
"extraStyle": {
|
||||
"type": "object",
|
||||
"description": "Css style to applied to label extra.",
|
||||
"docs": {
|
||||
"displayType": "yaml"
|
||||
}
|
||||
},
|
||||
"feedbackStyle": {
|
||||
"type": "object",
|
||||
"description": "Css style to applied to label feedback.",
|
||||
"docs": {
|
||||
"displayType": "yaml"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"title": {
|
||||
"type": "string",
|
||||
"description": "Title to describe the input component, if no title is specified the block id is displayed."
|
||||
}
|
||||
}
|
||||
},
|
||||
"events": {
|
||||
"type": "object",
|
||||
"additionalProperties": false,
|
||||
"properties": {
|
||||
"onChange": {
|
||||
"type": "array",
|
||||
"description": "Trigger actions when color is picked."
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,17 +0,0 @@
|
||||
/*
|
||||
Copyright 2020-2021 Lowdefy, Inc
|
||||
|
||||
Licensed under the Apache License, Version 2.0 (the "License");
|
||||
you may not use this file except in compliance with the License.
|
||||
You may obtain a copy of the License at
|
||||
|
||||
http://www.apache.org/licenses/LICENSE-2.0
|
||||
|
||||
Unless required by applicable law or agreed to in writing, software
|
||||
distributed under the License is distributed on an "AS IS" BASIS,
|
||||
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
See the License for the specific language governing permissions and
|
||||
limitations under the License.
|
||||
*/
|
||||
|
||||
@import '@lowdefy/blocks-antd/blocks/Label/style.less';
|
||||
@ -1,68 +0,0 @@
|
||||
/*
|
||||
Copyright 2020-2021 Lowdefy, Inc
|
||||
|
||||
Licensed under the Apache License, Version 2.0 (the "License");
|
||||
you may not use this file except in compliance with the License.
|
||||
You may obtain a copy of the License at
|
||||
|
||||
http://www.apache.org/licenses/LICENSE-2.0
|
||||
|
||||
Unless required by applicable law or agreed to in writing, software
|
||||
distributed under the License is distributed on an "AS IS" BASIS,
|
||||
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
See the License for the specific language governing permissions and
|
||||
limitations under the License.
|
||||
*/
|
||||
|
||||
import React from 'react';
|
||||
import SwatchesPicker from 'react-color/lib/Swatches.js';
|
||||
import { blockDefaultProps } from '@lowdefy/block-utils';
|
||||
import Label from '@lowdefy/blocks-antd/blocks/Label/Label.js';
|
||||
|
||||
const Selector = ({ blockId, loading, methods, properties, required, validation, value }) => {
|
||||
return (
|
||||
<Label
|
||||
blockId={blockId}
|
||||
loading={loading}
|
||||
methods={methods}
|
||||
properties={{ title: properties.title, size: properties.size, ...properties.label }}
|
||||
required={required}
|
||||
validation={validation}
|
||||
content={{
|
||||
content: () => (
|
||||
<SwatchesPicker
|
||||
id={`${blockId}_input`}
|
||||
className={methods.makeCssClass([
|
||||
{ marginBottom: '0px !important' },
|
||||
properties.inputStyle,
|
||||
])}
|
||||
color={value || properties.defaultColor || '#000000'}
|
||||
colors={properties.colors}
|
||||
width={properties.width || '100%'}
|
||||
height={properties.height || '135px'}
|
||||
onChangeComplete={(color) => {
|
||||
methods.setValue(color.hex ? color.hex : '#000000');
|
||||
methods.triggerEvent({ name: 'onChange' });
|
||||
}}
|
||||
/>
|
||||
),
|
||||
}}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
Selector.defaultProps = blockDefaultProps;
|
||||
Selector.meta = {
|
||||
valueType: 'string',
|
||||
category: 'input',
|
||||
loading: {
|
||||
type: 'Skeleton',
|
||||
properties: {
|
||||
height: 175,
|
||||
},
|
||||
},
|
||||
icons: [...Label.meta.icons],
|
||||
styles: ['blocks/SwatchesColorSelector/style.less'],
|
||||
};
|
||||
|
||||
export default Selector;
|
||||
@ -1,50 +0,0 @@
|
||||
/*
|
||||
Copyright 2020-2021 Lowdefy, Inc
|
||||
|
||||
Licensed under the Apache License, Version 2.0 (the "License");
|
||||
you may not use this file except in compliance with the License.
|
||||
You may obtain a copy of the License at
|
||||
|
||||
http://www.apache.org/licenses/LICENSE-2.0
|
||||
|
||||
Unless required by applicable law or agreed to in writing, software
|
||||
distributed under the License is distributed on an "AS IS" BASIS,
|
||||
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
See the License for the specific language governing permissions and
|
||||
limitations under the License.
|
||||
*/
|
||||
|
||||
import { runMockRenderTests } from '@lowdefy/block-dev';
|
||||
|
||||
import Block from './SwatchesColorSelector.js';
|
||||
import examples from './examples.yaml';
|
||||
import schema from './schema.json';
|
||||
|
||||
const testConfig = {
|
||||
validation: true,
|
||||
required: true,
|
||||
values: [],
|
||||
};
|
||||
|
||||
jest.mock('react-color', () => {
|
||||
const selectors = {
|
||||
SwatchesPicker: jest.fn(() => 'mocked'),
|
||||
};
|
||||
return selectors;
|
||||
});
|
||||
|
||||
const mocks = [
|
||||
{
|
||||
getMockFns: async () => {
|
||||
const antd = await import('react-color');
|
||||
return [antd.SwatchesPicker];
|
||||
},
|
||||
getBlock: async () => {
|
||||
const Block = await import('./SwatchesColorSelector.js');
|
||||
return Block.default;
|
||||
},
|
||||
name: 'SwatchesColorSelector',
|
||||
},
|
||||
];
|
||||
|
||||
runMockRenderTests({ Block, examples, mocks, schema, testConfig });
|
||||
@ -1,30 +0,0 @@
|
||||
/*
|
||||
Copyright 2020-2021 Lowdefy, Inc
|
||||
|
||||
Licensed under the Apache License, Version 2.0 (the "License");
|
||||
you may not use this file except in compliance with the License.
|
||||
You may obtain a copy of the License at
|
||||
|
||||
http://www.apache.org/licenses/LICENSE-2.0
|
||||
|
||||
Unless required by applicable law or agreed to in writing, software
|
||||
distributed under the License is distributed on an "AS IS" BASIS,
|
||||
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
See the License for the specific language governing permissions and
|
||||
limitations under the License.
|
||||
*/
|
||||
|
||||
import { runBlockSchemaTests, runRenderTests } from '@lowdefy/block-dev';
|
||||
|
||||
import Block from './SwatchesColorSelector.js';
|
||||
import examples from './examples.yaml';
|
||||
import schema from './schema.json';
|
||||
|
||||
const testConfig = {
|
||||
validation: true,
|
||||
required: true,
|
||||
values: [],
|
||||
};
|
||||
|
||||
runRenderTests({ Block, examples, schema, testConfig });
|
||||
runBlockSchemaTests({ examples, schema });
|
||||
@ -1,146 +0,0 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`Mock render - colors - value[0] - SwatchesColorSelector 1`] = `
|
||||
Array [
|
||||
Array [
|
||||
Object {
|
||||
"className": "{\\"style\\":[{\\"marginBottom\\":\\"0px !important\\"},null]}",
|
||||
"color": "#000000",
|
||||
"colors": Array [
|
||||
Array [
|
||||
"#123456",
|
||||
"#abc345",
|
||||
],
|
||||
Array [
|
||||
"#ff3456",
|
||||
"#aff345",
|
||||
],
|
||||
],
|
||||
"height": "135px",
|
||||
"id": "colors_input",
|
||||
"onChangeComplete": [Function],
|
||||
"width": "100%",
|
||||
},
|
||||
Object {},
|
||||
],
|
||||
]
|
||||
`;
|
||||
|
||||
exports[`Mock render - default - value[0] - SwatchesColorSelector 1`] = `
|
||||
Array [
|
||||
Array [
|
||||
Object {
|
||||
"className": "{\\"style\\":[{\\"marginBottom\\":\\"0px !important\\"},null]}",
|
||||
"color": "#000000",
|
||||
"colors": undefined,
|
||||
"height": "135px",
|
||||
"id": "default_input",
|
||||
"onChangeComplete": [Function],
|
||||
"width": "100%",
|
||||
},
|
||||
Object {},
|
||||
],
|
||||
]
|
||||
`;
|
||||
|
||||
exports[`Mock render - defaultColor - value[0] - SwatchesColorSelector 1`] = `
|
||||
Array [
|
||||
Array [
|
||||
Object {
|
||||
"className": "{\\"style\\":[{\\"marginBottom\\":\\"0px !important\\"},null]}",
|
||||
"color": "#11FF00",
|
||||
"colors": undefined,
|
||||
"height": "135px",
|
||||
"id": "defaultColor_input",
|
||||
"onChangeComplete": [Function],
|
||||
"width": "100%",
|
||||
},
|
||||
Object {},
|
||||
],
|
||||
]
|
||||
`;
|
||||
|
||||
exports[`Mock render - height - value[0] - SwatchesColorSelector 1`] = `
|
||||
Array [
|
||||
Array [
|
||||
Object {
|
||||
"className": "{\\"style\\":[{\\"marginBottom\\":\\"0px !important\\"},null]}",
|
||||
"color": "#000000",
|
||||
"colors": undefined,
|
||||
"height": 100,
|
||||
"id": "height_input",
|
||||
"onChangeComplete": [Function],
|
||||
"width": "100%",
|
||||
},
|
||||
Object {},
|
||||
],
|
||||
]
|
||||
`;
|
||||
|
||||
exports[`Mock render - inputStyle - value[0] - SwatchesColorSelector 1`] = `
|
||||
Array [
|
||||
Array [
|
||||
Object {
|
||||
"className": "{\\"style\\":[{\\"marginBottom\\":\\"0px !important\\"},{\\"border\\":\\"3px solid blue\\"}]}",
|
||||
"color": "#000000",
|
||||
"colors": undefined,
|
||||
"height": "135px",
|
||||
"id": "inputStyle_input",
|
||||
"onChangeComplete": [Function],
|
||||
"width": "100%",
|
||||
},
|
||||
Object {},
|
||||
],
|
||||
]
|
||||
`;
|
||||
|
||||
exports[`Mock render - label-disabled - value[0] - SwatchesColorSelector 1`] = `
|
||||
Array [
|
||||
Array [
|
||||
Object {
|
||||
"className": "{\\"style\\":[{\\"marginBottom\\":\\"0px !important\\"},null]}",
|
||||
"color": "#000000",
|
||||
"colors": undefined,
|
||||
"height": "135px",
|
||||
"id": "label-disabled_input",
|
||||
"onChangeComplete": [Function],
|
||||
"width": "100%",
|
||||
},
|
||||
Object {},
|
||||
],
|
||||
]
|
||||
`;
|
||||
|
||||
exports[`Mock render - title - value[0] - SwatchesColorSelector 1`] = `
|
||||
Array [
|
||||
Array [
|
||||
Object {
|
||||
"className": "{\\"style\\":[{\\"marginBottom\\":\\"0px !important\\"},null]}",
|
||||
"color": "#000000",
|
||||
"colors": undefined,
|
||||
"height": "135px",
|
||||
"id": "title_input",
|
||||
"onChangeComplete": [Function],
|
||||
"width": "100%",
|
||||
},
|
||||
Object {},
|
||||
],
|
||||
]
|
||||
`;
|
||||
|
||||
exports[`Mock render - width - value[0] - SwatchesColorSelector 1`] = `
|
||||
Array [
|
||||
Array [
|
||||
Object {
|
||||
"className": "{\\"style\\":[{\\"marginBottom\\":\\"0px !important\\"},null]}",
|
||||
"color": "#000000",
|
||||
"colors": undefined,
|
||||
"height": "135px",
|
||||
"id": "width_input",
|
||||
"onChangeComplete": [Function],
|
||||
"width": 100,
|
||||
},
|
||||
Object {},
|
||||
],
|
||||
]
|
||||
`;
|
||||
File diff suppressed because it is too large
Load Diff
@ -1,46 +0,0 @@
|
||||
# Copyright 2020-2021 Lowdefy, Inc
|
||||
|
||||
# Licensed under the Apache License, Version 2.0 (the "License");
|
||||
# you may not use this file except in compliance with the License.
|
||||
# You may obtain a copy of the License at
|
||||
|
||||
# http://www.apache.org/licenses/LICENSE-2.0
|
||||
|
||||
# Unless required by applicable law or agreed to in writing, software
|
||||
# distributed under the License is distributed on an "AS IS" BASIS,
|
||||
# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
# See the License for the specific language governing permissions and
|
||||
# limitations under the License.
|
||||
|
||||
- id: default
|
||||
type: SwatchesColorSelector
|
||||
- id: title
|
||||
type: SwatchesColorSelector
|
||||
properties:
|
||||
title: The color selector
|
||||
- id: colors
|
||||
type: SwatchesColorSelector
|
||||
properties:
|
||||
colors: [['#123456', '#abc345'], ['#ff3456', '#aff345']]
|
||||
- id: defaultColor
|
||||
type: SwatchesColorSelector
|
||||
properties:
|
||||
defaultColor: '#11FF00'
|
||||
- id: width
|
||||
type: SwatchesColorSelector
|
||||
properties:
|
||||
width: 100
|
||||
- id: height
|
||||
type: SwatchesColorSelector
|
||||
properties:
|
||||
height: 100
|
||||
- id: inputStyle
|
||||
type: SwatchesColorSelector
|
||||
properties:
|
||||
inputStyle:
|
||||
border: 3px solid blue
|
||||
- id: label-disabled
|
||||
type: SwatchesColorSelector
|
||||
properties:
|
||||
label:
|
||||
disabled: true
|
||||
@ -1,146 +0,0 @@
|
||||
{
|
||||
"type": "object",
|
||||
"properties": {
|
||||
"type": "object",
|
||||
"properties": {
|
||||
"colors": {
|
||||
"type": "array",
|
||||
"description": "List of swatch colors options to display.",
|
||||
"items": {
|
||||
"type": "array",
|
||||
"items": {
|
||||
"type": "string",
|
||||
"docs": {
|
||||
"displayType": "color"
|
||||
}
|
||||
}
|
||||
},
|
||||
"default": [
|
||||
["#b71c1c", "#d32f2f", "#f44336", "#e57373", "#ffcdd2"],
|
||||
["#880e4f", "#c2185b", "#e91e63", "#f06292", "#f8bbd0"],
|
||||
["#4a148c", "#7b1fa2", "#9c27b0", "#ba68c8", "#e1bee7"],
|
||||
["#311b92", "#512da8", "#673ab7", "#9575cd", "#d1c4e9"],
|
||||
["#1a237e", "#303f9f", "#3f51b5", "#7986cb", "#c5cae9"],
|
||||
["#0d47a1", "#1976d2", "#2196f3", "#64b5f6", "#bbdefb"],
|
||||
["#01579b", "#0288d1", "#03a9f4", "#4fc3f7", "#b3e5fc"],
|
||||
["#006064", "#0097a7", "#00bcd4", "#4dd0e1", "#b2ebf2"],
|
||||
["#004d40", "#00796b", "#009688", "#4db6ac", "#b2dfdb"],
|
||||
["#194d33", "#388e3c", "#4caf50", "#81c784", "#c8e6c9"],
|
||||
["#33691e", "#689f38", "#8bc34a", "#aed581", "#dcedc8"],
|
||||
["#827717", "#afb42b", "#cddc39", "#dce775", "#f0f4c3"],
|
||||
["#f57f17", "#fbc02d", "#ffeb3b", "#fff176", "#fff9c4"],
|
||||
["#ff6f00", "#ffa000", "#ffc107", "#ffd54f", "#ffecb3"],
|
||||
["#e65100", "#f57c00", "#ff9800", "#ffb74d", "#ffe0b2"],
|
||||
["#bf360c", "#e64a19", "#ff5722", "#ff8a65", "#ffccbc"],
|
||||
["#3e2723", "#5d4037", "#795548", "#a1887f", "#d7ccc8"],
|
||||
["#263238", "#455a64", "#607d8b", "#90a4ae", "#cfd8dc"],
|
||||
["#000000", "#525252", "#969696", "#d9d9d9", "#ffffff"]
|
||||
]
|
||||
},
|
||||
"defaultColor": {
|
||||
"type": "string",
|
||||
"default": "#000000",
|
||||
"description": "Default color to display if input value is null.",
|
||||
"docs": {
|
||||
"displayType": "color"
|
||||
}
|
||||
},
|
||||
"height": {
|
||||
"type": ["string", "number"],
|
||||
"description": "Color selector height.",
|
||||
"default": "135px",
|
||||
"docs": {
|
||||
"displayType": "string"
|
||||
}
|
||||
},
|
||||
"inputStyle": {
|
||||
"type": "object",
|
||||
"description": "Css style to applied to input.",
|
||||
"docs": {
|
||||
"displayType": "yaml"
|
||||
}
|
||||
},
|
||||
"label": {
|
||||
"type": "object",
|
||||
"description": "Label properties.",
|
||||
"additionalProperties": false,
|
||||
"properties": {
|
||||
"align": {
|
||||
"type": "string",
|
||||
"enum": ["left", "right"],
|
||||
"default": "left",
|
||||
"description": "Align label left or right when inline."
|
||||
},
|
||||
"colon": {
|
||||
"type": "boolean",
|
||||
"default": true,
|
||||
"description": "Append label with colon."
|
||||
},
|
||||
"extra": {
|
||||
"type": "string",
|
||||
"description": "Extra text to display beneath the content."
|
||||
},
|
||||
"title": {
|
||||
"type": "string",
|
||||
"description": "Label title."
|
||||
},
|
||||
"span": {
|
||||
"type": "number",
|
||||
"description": "Label inline span."
|
||||
},
|
||||
"disabled": {
|
||||
"type": "boolean",
|
||||
"default": false,
|
||||
"description": "Hide input label."
|
||||
},
|
||||
"hasFeedback": {
|
||||
"type": "boolean",
|
||||
"default": true,
|
||||
"description": "Display feedback extra from validation, this does not disable validation."
|
||||
},
|
||||
"inline": {
|
||||
"type": "boolean",
|
||||
"default": false,
|
||||
"description": "Render input and label inline."
|
||||
},
|
||||
"extraStyle": {
|
||||
"type": "object",
|
||||
"description": "Css style to applied to label extra.",
|
||||
"docs": {
|
||||
"displayType": "yaml"
|
||||
}
|
||||
},
|
||||
"feedbackStyle": {
|
||||
"type": "object",
|
||||
"description": "Css style to applied to label feedback.",
|
||||
"docs": {
|
||||
"displayType": "yaml"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"title": {
|
||||
"type": "string",
|
||||
"description": "Title to describe the input component, if no title is specified the block id is displayed."
|
||||
},
|
||||
"width": {
|
||||
"type": ["string", "number"],
|
||||
"description": "Color selector width.",
|
||||
"default": "100%",
|
||||
"docs": {
|
||||
"displayType": "string"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"events": {
|
||||
"type": "object",
|
||||
"additionalProperties": false,
|
||||
"properties": {
|
||||
"onChange": {
|
||||
"type": "array",
|
||||
"description": "Trigger actions when color is picked."
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,17 +0,0 @@
|
||||
/*
|
||||
Copyright 2020-2021 Lowdefy, Inc
|
||||
|
||||
Licensed under the Apache License, Version 2.0 (the "License");
|
||||
you may not use this file except in compliance with the License.
|
||||
You may obtain a copy of the License at
|
||||
|
||||
http://www.apache.org/licenses/LICENSE-2.0
|
||||
|
||||
Unless required by applicable law or agreed to in writing, software
|
||||
distributed under the License is distributed on an "AS IS" BASIS,
|
||||
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
See the License for the specific language governing permissions and
|
||||
limitations under the License.
|
||||
*/
|
||||
|
||||
@import '@lowdefy/blocks-antd/blocks/Label/style.less';
|
||||
@ -1,64 +0,0 @@
|
||||
/*
|
||||
Copyright 2020-2021 Lowdefy, Inc
|
||||
|
||||
Licensed under the Apache License, Version 2.0 (the "License");
|
||||
you may not use this file except in compliance with the License.
|
||||
You may obtain a copy of the License at
|
||||
|
||||
http://www.apache.org/licenses/LICENSE-2.0
|
||||
|
||||
Unless required by applicable law or agreed to in writing, software
|
||||
distributed under the License is distributed on an "AS IS" BASIS,
|
||||
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
See the License for the specific language governing permissions and
|
||||
limitations under the License.
|
||||
*/
|
||||
|
||||
import React from 'react';
|
||||
import TwitterPicker from 'react-color/lib/Twitter.js';
|
||||
import { blockDefaultProps } from '@lowdefy/block-utils';
|
||||
import Label from '@lowdefy/blocks-antd/blocks/Label/Label.js';
|
||||
|
||||
const Selector = ({ blockId, loading, methods, properties, required, validation, value }) => {
|
||||
return (
|
||||
<Label
|
||||
blockId={blockId}
|
||||
loading={loading}
|
||||
methods={methods}
|
||||
properties={{ title: properties.title, size: properties.size, ...properties.label }}
|
||||
required={required}
|
||||
validation={validation}
|
||||
content={{
|
||||
content: () => (
|
||||
<TwitterPicker
|
||||
id={`${blockId}_input`}
|
||||
color={value || properties.defaultColor || '#000000'}
|
||||
colors={properties.colors}
|
||||
triangle={properties.triangle || 'hide'}
|
||||
width={properties.width || '100%'}
|
||||
onChangeComplete={(color) => {
|
||||
methods.setValue(color.hex ? color.hex : '#000000');
|
||||
methods.triggerEvent({ name: 'onChange' });
|
||||
}}
|
||||
/>
|
||||
),
|
||||
}}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
Selector.defaultProps = blockDefaultProps;
|
||||
Selector.meta = {
|
||||
valueType: 'string',
|
||||
category: 'input',
|
||||
loading: {
|
||||
type: 'Skeleton',
|
||||
properties: {
|
||||
height: 96,
|
||||
},
|
||||
},
|
||||
icons: [...Label.meta.icons],
|
||||
styles: ['blocks/TwitterColorSelector/style.less'],
|
||||
};
|
||||
|
||||
export default Selector;
|
||||
@ -1,50 +0,0 @@
|
||||
/*
|
||||
Copyright 2020-2021 Lowdefy, Inc
|
||||
|
||||
Licensed under the Apache License, Version 2.0 (the "License");
|
||||
you may not use this file except in compliance with the License.
|
||||
You may obtain a copy of the License at
|
||||
|
||||
http://www.apache.org/licenses/LICENSE-2.0
|
||||
|
||||
Unless required by applicable law or agreed to in writing, software
|
||||
distributed under the License is distributed on an "AS IS" BASIS,
|
||||
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
See the License for the specific language governing permissions and
|
||||
limitations under the License.
|
||||
*/
|
||||
|
||||
import { runMockRenderTests } from '@lowdefy/block-dev';
|
||||
|
||||
import Block from './TwitterColorSelector.js';
|
||||
import examples from './examples.yaml';
|
||||
import schema from './schema.json';
|
||||
|
||||
const testConfig = {
|
||||
validation: true,
|
||||
required: true,
|
||||
values: [],
|
||||
};
|
||||
|
||||
jest.mock('react-color', () => {
|
||||
const selectors = {
|
||||
TwitterPicker: jest.fn(() => 'mocked'),
|
||||
};
|
||||
return selectors;
|
||||
});
|
||||
|
||||
const mocks = [
|
||||
{
|
||||
getMockFns: async () => {
|
||||
const antd = await import('react-color');
|
||||
return [antd.TwitterPicker];
|
||||
},
|
||||
getBlock: async () => {
|
||||
const Block = await import('./TwitterColorSelector.js');
|
||||
return Block.default;
|
||||
},
|
||||
name: 'TwitterColorSelector',
|
||||
},
|
||||
];
|
||||
|
||||
runMockRenderTests({ Block, examples, mocks, schema, testConfig });
|
||||
@ -1,30 +0,0 @@
|
||||
/*
|
||||
Copyright 2020-2021 Lowdefy, Inc
|
||||
|
||||
Licensed under the Apache License, Version 2.0 (the "License");
|
||||
you may not use this file except in compliance with the License.
|
||||
You may obtain a copy of the License at
|
||||
|
||||
http://www.apache.org/licenses/LICENSE-2.0
|
||||
|
||||
Unless required by applicable law or agreed to in writing, software
|
||||
distributed under the License is distributed on an "AS IS" BASIS,
|
||||
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
See the License for the specific language governing permissions and
|
||||
limitations under the License.
|
||||
*/
|
||||
|
||||
import { runBlockSchemaTests, runRenderTests } from '@lowdefy/block-dev';
|
||||
|
||||
import Block from './TwitterColorSelector.js';
|
||||
import examples from './examples.yaml';
|
||||
import schema from './schema.json';
|
||||
|
||||
const testConfig = {
|
||||
validation: true,
|
||||
required: true,
|
||||
values: [],
|
||||
};
|
||||
|
||||
runRenderTests({ Block, examples, schema, testConfig });
|
||||
runBlockSchemaTests({ examples, schema });
|
||||
@ -1,132 +0,0 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`Mock render - colors - value[0] - TwitterColorSelector 1`] = `
|
||||
Array [
|
||||
Array [
|
||||
Object {
|
||||
"color": "#000000",
|
||||
"colors": Array [
|
||||
"#123456",
|
||||
"#abc345",
|
||||
],
|
||||
"id": "colors_input",
|
||||
"onChangeComplete": [Function],
|
||||
"triangle": "hide",
|
||||
"width": "100%",
|
||||
},
|
||||
Object {},
|
||||
],
|
||||
]
|
||||
`;
|
||||
|
||||
exports[`Mock render - default - value[0] - TwitterColorSelector 1`] = `
|
||||
Array [
|
||||
Array [
|
||||
Object {
|
||||
"color": "#000000",
|
||||
"colors": undefined,
|
||||
"id": "default_input",
|
||||
"onChangeComplete": [Function],
|
||||
"triangle": "hide",
|
||||
"width": "100%",
|
||||
},
|
||||
Object {},
|
||||
],
|
||||
]
|
||||
`;
|
||||
|
||||
exports[`Mock render - defaultColor - value[0] - TwitterColorSelector 1`] = `
|
||||
Array [
|
||||
Array [
|
||||
Object {
|
||||
"color": "#FF0000",
|
||||
"colors": undefined,
|
||||
"id": "defaultColor_input",
|
||||
"onChangeComplete": [Function],
|
||||
"triangle": "hide",
|
||||
"width": "100%",
|
||||
},
|
||||
Object {},
|
||||
],
|
||||
]
|
||||
`;
|
||||
|
||||
exports[`Mock render - label-disabled - value[0] - TwitterColorSelector 1`] = `
|
||||
Array [
|
||||
Array [
|
||||
Object {
|
||||
"color": "#000000",
|
||||
"colors": undefined,
|
||||
"id": "label-disabled_input",
|
||||
"onChangeComplete": [Function],
|
||||
"triangle": "hide",
|
||||
"width": "100%",
|
||||
},
|
||||
Object {},
|
||||
],
|
||||
]
|
||||
`;
|
||||
|
||||
exports[`Mock render - title - value[0] - TwitterColorSelector 1`] = `
|
||||
Array [
|
||||
Array [
|
||||
Object {
|
||||
"color": "#000000",
|
||||
"colors": undefined,
|
||||
"id": "title_input",
|
||||
"onChangeComplete": [Function],
|
||||
"triangle": "hide",
|
||||
"width": "100%",
|
||||
},
|
||||
Object {},
|
||||
],
|
||||
]
|
||||
`;
|
||||
|
||||
exports[`Mock render - triangle-top-left - value[0] - TwitterColorSelector 1`] = `
|
||||
Array [
|
||||
Array [
|
||||
Object {
|
||||
"color": "#000000",
|
||||
"colors": undefined,
|
||||
"id": "triangle-top-left_input",
|
||||
"onChangeComplete": [Function],
|
||||
"triangle": "top-left",
|
||||
"width": "100%",
|
||||
},
|
||||
Object {},
|
||||
],
|
||||
]
|
||||
`;
|
||||
|
||||
exports[`Mock render - triangle-top-right - value[0] - TwitterColorSelector 1`] = `
|
||||
Array [
|
||||
Array [
|
||||
Object {
|
||||
"color": "#000000",
|
||||
"colors": undefined,
|
||||
"id": "triangle-top-right_input",
|
||||
"onChangeComplete": [Function],
|
||||
"triangle": "top-right",
|
||||
"width": "100%",
|
||||
},
|
||||
Object {},
|
||||
],
|
||||
]
|
||||
`;
|
||||
|
||||
exports[`Mock render - width - value[0] - TwitterColorSelector 1`] = `
|
||||
Array [
|
||||
Array [
|
||||
Object {
|
||||
"color": "#000000",
|
||||
"colors": undefined,
|
||||
"id": "width_input",
|
||||
"onChangeComplete": [Function],
|
||||
"triangle": "hide",
|
||||
"width": 200,
|
||||
},
|
||||
Object {},
|
||||
],
|
||||
]
|
||||
`;
|
||||
File diff suppressed because it is too large
Load Diff
@ -1,45 +0,0 @@
|
||||
# Copyright 2020-2021 Lowdefy, Inc
|
||||
|
||||
# Licensed under the Apache License, Version 2.0 (the "License");
|
||||
# you may not use this file except in compliance with the License.
|
||||
# You may obtain a copy of the License at
|
||||
|
||||
# http://www.apache.org/licenses/LICENSE-2.0
|
||||
|
||||
# Unless required by applicable law or agreed to in writing, software
|
||||
# distributed under the License is distributed on an "AS IS" BASIS,
|
||||
# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
# See the License for the specific language governing permissions and
|
||||
# limitations under the License.
|
||||
|
||||
- id: default
|
||||
type: TwitterColorSelector
|
||||
- id: title
|
||||
type: TwitterColorSelector
|
||||
properties:
|
||||
title: The color selector
|
||||
- id: colors
|
||||
type: TwitterColorSelector
|
||||
properties:
|
||||
colors: ['#123456', '#abc345']
|
||||
- id: defaultColor
|
||||
type: TwitterColorSelector
|
||||
properties:
|
||||
defaultColor: '#FF0000'
|
||||
- id: triangle-top-left
|
||||
type: TwitterColorSelector
|
||||
properties:
|
||||
triangle: top-left
|
||||
- id: triangle-top-right
|
||||
type: TwitterColorSelector
|
||||
properties:
|
||||
triangle: top-right
|
||||
- id: width
|
||||
type: TwitterColorSelector
|
||||
properties:
|
||||
width: 200
|
||||
- id: label-disabled
|
||||
type: TwitterColorSelector
|
||||
properties:
|
||||
label:
|
||||
disabled: true
|
||||
@ -1,125 +0,0 @@
|
||||
{
|
||||
"type": "object",
|
||||
"properties": {
|
||||
"type": "object",
|
||||
"properties": {
|
||||
"colors": {
|
||||
"type": "array",
|
||||
"description": "Colors to display.",
|
||||
"default": [
|
||||
"#FF6900",
|
||||
"#FCB900",
|
||||
"#7BDCB5",
|
||||
"#00D084",
|
||||
"#8ED1FC",
|
||||
"#0693E3",
|
||||
"#ABB8C3",
|
||||
"#EB144C",
|
||||
"#F78DA7",
|
||||
"#9900EF"
|
||||
],
|
||||
"items": {
|
||||
"type": "string",
|
||||
"docs": {
|
||||
"displayType": "color"
|
||||
}
|
||||
}
|
||||
},
|
||||
"defaultColor": {
|
||||
"type": "string",
|
||||
"default": "#000000",
|
||||
"description": "Default color to display if input value is null.",
|
||||
"docs": {
|
||||
"displayType": "color"
|
||||
}
|
||||
},
|
||||
"label": {
|
||||
"type": "object",
|
||||
"description": "Label properties.",
|
||||
"additionalProperties": false,
|
||||
"properties": {
|
||||
"align": {
|
||||
"type": "string",
|
||||
"enum": ["left", "right"],
|
||||
"default": "left",
|
||||
"description": "Align label left or right when inline."
|
||||
},
|
||||
"colon": {
|
||||
"type": "boolean",
|
||||
"default": true,
|
||||
"description": "Append label with colon."
|
||||
},
|
||||
"extra": {
|
||||
"type": "string",
|
||||
"description": "Extra text to display beneath the content."
|
||||
},
|
||||
"title": {
|
||||
"type": "string",
|
||||
"description": "Label title."
|
||||
},
|
||||
"span": {
|
||||
"type": "number",
|
||||
"description": "Label inline span."
|
||||
},
|
||||
"disabled": {
|
||||
"type": "boolean",
|
||||
"default": false,
|
||||
"description": "Hide input label."
|
||||
},
|
||||
"hasFeedback": {
|
||||
"type": "boolean",
|
||||
"default": true,
|
||||
"description": "Display feedback extra from validation, this does not disable validation."
|
||||
},
|
||||
"inline": {
|
||||
"type": "boolean",
|
||||
"default": false,
|
||||
"description": "Render input and label inline."
|
||||
},
|
||||
"extraStyle": {
|
||||
"type": "object",
|
||||
"description": "Css style to applied to label extra.",
|
||||
"docs": {
|
||||
"displayType": "yaml"
|
||||
}
|
||||
},
|
||||
"feedbackStyle": {
|
||||
"type": "object",
|
||||
"description": "Css style to applied to label feedback.",
|
||||
"docs": {
|
||||
"displayType": "yaml"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"title": {
|
||||
"type": "string",
|
||||
"description": "Title to describe the input component, if no title is specified the block id is displayed."
|
||||
},
|
||||
"triangle": {
|
||||
"type": "string",
|
||||
"enum": ["hide", "top-left", "top-right"],
|
||||
"default": "hide",
|
||||
"description": "Show triangle on color selector border."
|
||||
},
|
||||
"width": {
|
||||
"type": ["string", "number"],
|
||||
"description": "Color selector width.",
|
||||
"default": "100%",
|
||||
"docs": {
|
||||
"displayType": "string"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"events": {
|
||||
"type": "object",
|
||||
"additionalProperties": false,
|
||||
"properties": {
|
||||
"onChange": {
|
||||
"type": "array",
|
||||
"description": "Trigger actions when color is picked."
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,17 +0,0 @@
|
||||
/*
|
||||
Copyright 2020-2021 Lowdefy, Inc
|
||||
|
||||
Licensed under the Apache License, Version 2.0 (the "License");
|
||||
you may not use this file except in compliance with the License.
|
||||
You may obtain a copy of the License at
|
||||
|
||||
http://www.apache.org/licenses/LICENSE-2.0
|
||||
|
||||
Unless required by applicable law or agreed to in writing, software
|
||||
distributed under the License is distributed on an "AS IS" BASIS,
|
||||
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
See the License for the specific language governing permissions and
|
||||
limitations under the License.
|
||||
*/
|
||||
|
||||
@import '@lowdefy/blocks-antd/blocks/Label/style.less';
|
||||
@ -45,15 +45,16 @@ pages:
|
||||
type: line
|
||||
```
|
||||
|
||||
<!-- TODO
|
||||
## Other Lowdefy Blocks Packages
|
||||
|
||||
- [@lowdefy/blocks-template](https://github.com/lowdefy/blocks-template): Lowdefy template for creating blocks.
|
||||
- [@lowdefy/blocks-basic](https://github.com/lowdefy/lowdefy/tree/main/packages/blocks/blocksBasic): Official Lowdefy blocks some basic Html elements.
|
||||
- [@lowdefy/blocks-antd](https://github.com/lowdefy/lowdefy/tree/main/packages/blocks/blocksAntd): Official Lowdefy blocks for [Antd design](https://ant.design/).
|
||||
- [@lowdefy/blocks-color-selectors](https://github.com/lowdefy/lowdefy/tree/main/packages/blocks/blocksColorSelectorsd): Official Lowdefy blocks for [react-color](https://casesandberg.github.io/react-color/).
|
||||
- [@lowdefy/blocks-color-selectors](https://github.com/lowdefy/lowdefy/tree/main/packages/blocks/blocksColorSelectors): Official Lowdefy blocks for [react-colorful](https://casesandberg.github.io/react-colorful/).
|
||||
- [@lowdefy/blocks-markdown](https://github.com/lowdefy/lowdefy/tree/main/packages/blocks/blocksMarkdown): Official Lowdefy blocks to render Markdown.
|
||||
- [@lowdefy/blocks-amcharts](https://github.com/lowdefy/blocks-amcharts): Lowdefy blocks to render [AmCharts v4](https://www.amcharts.com/).
|
||||
- [@lowdefy/blocks-aggrid](https://github.com/lowdefy/blocks-aggrid): Lowdefy blocks to render [Ag-Grid](https://www.ag-grid.com/) tables.
|
||||
- [@lowdefy/blocks-aggrid](https://github.com/lowdefy/blocks-aggrid): Lowdefy blocks to render [Ag-Grid](https://www.ag-grid.com/) tables. -->
|
||||
|
||||
## More Lowdefy resources
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user