From 035002ceedf78d5ec73eabc0df7f06139939b967 Mon Sep 17 00:00:00 2001 From: Amine El Mouafik <412895+kytwb@users.noreply.github.com> Date: Mon, 8 Feb 2021 10:34:45 +0100 Subject: Synchronize with Franz 5.6.0 (#1033) Co-authored-by: FranzBot Co-authored-by: vantezzen Co-authored-by: Makazzz Co-authored-by: Stefan Malzner Co-authored-by: Amine Mouafik --- packages/forms/package.json | 6 +- packages/forms/src/index.ts | 1 + packages/forms/src/textarea/index.tsx | 128 ++++++++++++++++++++++++++++++++++ packages/forms/src/textarea/styles.ts | 53 ++++++++++++++ packages/ui/package-lock.json | 95 ++++++++++++------------- packages/ui/package.json | 7 +- 6 files changed, 236 insertions(+), 54 deletions(-) create mode 100644 packages/forms/src/textarea/index.tsx create mode 100644 packages/forms/src/textarea/styles.ts (limited to 'packages') diff --git a/packages/forms/package.json b/packages/forms/package.json index 18b6d2244..f61b787ac 100644 --- a/packages/forms/package.json +++ b/packages/forms/package.json @@ -1,7 +1,7 @@ { "name": "@meetfranz/forms", - "version": "1.1.0", - "description": "React form components for Ferdi", + "version": "1.2.1", + "description": "React form components for Franz", "main": "lib/index.js", "scripts": { "dev": "tsc -w", @@ -35,5 +35,5 @@ "react-dom": "16.7.0", "react-jss": "^8.6.1" }, - "gitHead": "e1e46986d902adc4c19ee009016290f9733a7d61" + "gitHead": "00db2bddccb8bb8ad7d29b8d032876c798b8bbf3" } diff --git a/packages/forms/src/index.ts b/packages/forms/src/index.ts index ea47fe25e..45a9ed8e3 100644 --- a/packages/forms/src/index.ts +++ b/packages/forms/src/index.ts @@ -1,4 +1,5 @@ export { Input } from './input'; +export { Textarea } from './textarea'; export { Toggle } from './toggle'; export { Button } from './button'; export { Select } from './select'; diff --git a/packages/forms/src/textarea/index.tsx b/packages/forms/src/textarea/index.tsx new file mode 100644 index 000000000..cd691a507 --- /dev/null +++ b/packages/forms/src/textarea/index.tsx @@ -0,0 +1,128 @@ +import { mdiEye, mdiEyeOff } from '@mdi/js'; +import Icon from '@mdi/react'; +import classnames from 'classnames'; +import React, { Component, createRef } from 'react'; +import injectSheet from 'react-jss'; + +import { IFormField, IWithStyle } from '../typings/generic'; + +import { Error } from '../error'; +import { Label } from '../label'; +import { Wrapper } from '../wrapper'; + +import styles from './styles'; + +interface IData { + [index: string]: string; +} + +interface IProps extends React.TextareaHTMLAttributes, IFormField, IWithStyle { + focus?: boolean; + data: IData; + textareaClassName?: string; +} + +class TextareaComponent extends Component { + static defaultProps = { + focus: false, + onChange: () => {}, + onBlur: () => {}, + onFocus: () => {}, + showLabel: true, + disabled: false, + rows: 5, + }; + + private textareaRef = createRef(); + + componentDidMount() { + const { data } = this.props; + + if (this.textareaRef && this.textareaRef.current && data) { + Object.keys(data).map(key => this.textareaRef.current!.dataset[key] = data[key]); + } + } + + onChange(e: React.ChangeEvent) { + const { + onChange, + } = this.props; + + if (onChange) { + onChange(e); + } + } + + render() { + const { + classes, + className, + disabled, + error, + focus, + id, + textareaClassName, + label, + showLabel, + value, + name, + placeholder, + spellCheck, + onBlur, + onFocus, + minLength, + maxLength, + required, + rows, + noMargin, + } = this.props; + + return ( + + + {error && ( + + )} + + ); + } +} + +export const Textarea = injectSheet(styles)(TextareaComponent); diff --git a/packages/forms/src/textarea/styles.ts b/packages/forms/src/textarea/styles.ts new file mode 100644 index 000000000..c1cbd76a5 --- /dev/null +++ b/packages/forms/src/textarea/styles.ts @@ -0,0 +1,53 @@ +import { Theme } from '@meetfranz/theme'; +import CSS from 'csstype'; + +export default (theme: Theme) => ({ + label: { + '& > div': { + marginTop: 5, + }, + }, + disabled: { + opacity: theme.inputDisabledOpacity, + }, + formModifier: { + background: 'none', + border: 0, + borderLeft: theme.inputBorder, + padding: '4px 20px 0', + outline: 'none', + + '&:active': { + opacity: 0.5, + }, + + '& svg': { + fill: theme.inputModifierColor, + }, + }, + textarea: { + background: 'none', + border: 0, + fontSize: theme.uiFontSize, + outline: 'none', + padding: 8, + width: '100%', + color: theme.inputColor, + + '&::placeholder': { + color: theme.inputPlaceholderColor, + }, + }, + wrapper: { + background: theme.inputBackground, + border: theme.inputBorder, + borderRadius: theme.borderRadiusSmall, + boxSizing: 'border-box' as CSS.BoxSizingProperty, + display: 'flex', + order: 1, + width: '100%', + }, + hasError: { + borderColor: theme.brandDanger, + }, +}); diff --git a/packages/ui/package-lock.json b/packages/ui/package-lock.json index 8fa68a29b..64020c004 100644 --- a/packages/ui/package-lock.json +++ b/packages/ui/package-lock.json @@ -1,63 +1,20 @@ { "name": "@meetfranz/ui", - "version": "0.0.0", + "version": "1.0.0", "lockfileVersion": 1, "requires": true, "dependencies": { - "@mdi/js": { - "version": "3.3.92", - "resolved": "https://registry.npmjs.org/@mdi/js/-/js-3.3.92.tgz", - "integrity": "sha512-l+12IwTycHlijWMiRWBAssm0RSgkQiwMthIy/EcBAdSqtnsHnFjHq+aI2MBZ8/AYX0QBxNUv4+EN0SXZgNkWDg==" - }, "@mdi/react": { "version": "1.1.0", "resolved": "https://registry.npmjs.org/@mdi/react/-/react-1.1.0.tgz", "integrity": "sha512-c0+avMYEZ6i7Pg1ULLFs+p7k8bDPiie9rrgGYs8VWQhw2tUUYz7r0lIPVzD3bzMghWfyhfkArj88K5Of0WTMNw==" }, "@meetfranz/theme": { - "version": "file:../theme", + "version": "1.0.14", + "resolved": "https://registry.npmjs.org/@meetfranz/theme/-/theme-1.0.14.tgz", + "integrity": "sha512-iWP+3ifiNum98sHKiNdUJK+R0p4Z7TT8OenA1N2BnSC6CFob+dLhzAK+o5lxcyEcKZKYDwd7JKRZj93wqpBPpg==", "requires": { "color": "^3.1.0" - }, - "dependencies": { - "color": { - "version": "3.1.0", - "bundled": true, - "requires": { - "color-convert": "^1.9.1", - "color-string": "^1.5.2" - } - }, - "color-convert": { - "version": "1.9.3", - "bundled": true, - "requires": { - "color-name": "1.1.3" - } - }, - "color-name": { - "version": "1.1.3", - "bundled": true - }, - "color-string": { - "version": "1.5.3", - "bundled": true, - "requires": { - "color-name": "^1.0.0", - "simple-swizzle": "^0.2.2" - } - }, - "is-arrayish": { - "version": "0.3.2", - "bundled": true - }, - "simple-swizzle": { - "version": "0.2.2", - "bundled": true, - "requires": { - "is-arrayish": "^0.3.1" - } - } } }, "asap": { @@ -65,6 +22,37 @@ "resolved": "https://registry.npmjs.org/asap/-/asap-2.0.6.tgz", "integrity": "sha1-5QNHYR1+aQlDIIu9r+vLwvuGbUY=" }, + "color": { + "version": "3.1.2", + "resolved": "https://registry.npmjs.org/color/-/color-3.1.2.tgz", + "integrity": "sha512-vXTJhHebByxZn3lDvDJYw4lR5+uB3vuoHsuYA5AKuxRVn5wzzIfQKGLBmgdVRHKTJYeK5rvJcHnrd0Li49CFpg==", + "requires": { + "color-convert": "^1.9.1", + "color-string": "^1.5.2" + } + }, + "color-convert": { + "version": "1.9.3", + "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz", + "integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==", + "requires": { + "color-name": "1.1.3" + } + }, + "color-name": { + "version": "1.1.3", + "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz", + "integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU=" + }, + "color-string": { + "version": "1.5.3", + "resolved": "https://registry.npmjs.org/color-string/-/color-string-1.5.3.tgz", + "integrity": "sha512-dC2C5qeWoYkxki5UAXapdjqO672AM4vZuPGRQfO8b5HKuKGBbKWpITyDYN7TOFKvRW7kOgAn3746clDBMDJyQw==", + "requires": { + "color-name": "^1.0.0", + "simple-swizzle": "^0.2.2" + } + }, "core-js": { "version": "1.2.7", "resolved": "https://registry.npmjs.org/core-js/-/core-js-1.2.7.tgz", @@ -110,6 +98,11 @@ "safer-buffer": ">= 2.1.2 < 3" } }, + "is-arrayish": { + "version": "0.3.2", + "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.3.2.tgz", + "integrity": "sha512-eVRqCvVlZbuw3GrM63ovNSNAeA1K16kaR/LRY/92w0zxQ5/1YzwblUX652i4Xs9RwAGjW9d9y6X88t8OaAJfWQ==" + }, "is-stream": { "version": "1.1.0", "resolved": "https://registry.npmjs.org/is-stream/-/is-stream-1.1.0.tgz", @@ -188,6 +181,14 @@ "resolved": "https://registry.npmjs.org/setimmediate/-/setimmediate-1.0.5.tgz", "integrity": "sha1-KQy7Iy4waULX1+qbg3Mqt4VvgoU=" }, + "simple-swizzle": { + "version": "0.2.2", + "resolved": "https://registry.npmjs.org/simple-swizzle/-/simple-swizzle-0.2.2.tgz", + "integrity": "sha1-pNprY1/8zMoz9w0Xy5JZLeleVXo=", + "requires": { + "is-arrayish": "^0.3.1" + } + }, "spin.js": { "version": "2.3.2", "resolved": "https://registry.npmjs.org/spin.js/-/spin.js-2.3.2.tgz", diff --git a/packages/ui/package.json b/packages/ui/package.json index 214437093..fefe06f4c 100644 --- a/packages/ui/package.json +++ b/packages/ui/package.json @@ -1,7 +1,7 @@ { "name": "@meetfranz/ui", - "version": "1.0.0", - "description": "React UI components for Ferdi", + "version": "1.1.0", + "description": "React UI components for Franz", "main": "lib/index.js", "scripts": { "dev": "tsc -w", @@ -23,7 +23,6 @@ "author": "Stefan Malzner ", "license": "Apache-2.0", "dependencies": { - "@mdi/js": "^3.3.92", "@mdi/react": "^1.1.0", "@meetfranz/theme": "^1.0.14", "react-loader": "^2.4.5" @@ -34,5 +33,5 @@ "react-dom": "16.7.0", "react-jss": "^8.6.1" }, - "gitHead": "e1e46986d902adc4c19ee009016290f9733a7d61" + "gitHead": "254da30f801169fac376bda1439b46cabbb491ad" } -- cgit v1.2.3-54-g00ecf