From d410b89869697a19ee680b395daef6ca11348809 Mon Sep 17 00:00:00 2001 From: Siddharth Thevaril Date: Sat, 1 Oct 2022 00:56:16 +0530 Subject: [PATCH 1/3] move counter outside Richtext component --- components/counter/index.js | 123 +++++++++++++++++ components/index.js | 8 +- components/rich-text-character-limit/index.js | 126 +----------------- .../blocks/rich-text-character-limit/index.js | 2 +- 4 files changed, 130 insertions(+), 129 deletions(-) create mode 100644 components/counter/index.js diff --git a/components/counter/index.js b/components/counter/index.js new file mode 100644 index 00000000..9401d7ae --- /dev/null +++ b/components/counter/index.js @@ -0,0 +1,123 @@ +import { forwardRef } from '@wordpress/element'; +import PropTypes from 'prop-types'; +import cx from 'classnames'; +import styled from '@emotion/styled'; + +const StyledSvg = styled('svg')` + transform: rotate(-90deg); + + & circle { + transition: stroke-dashoffset 0.3s linear; + stroke: currentColor; + stroke-width: 1em; + opacity: 0.3; + } + + & path { + fill: currentColor; + } + + & .bar { + stroke: currentColor; + opacity: 1; + } +`; + +const StyledCounter = styled('div')` + display: flex; + align-items: center; + justify-content: center; + gap: 0.5em; + font-variant-numeric: tabular-nums; +`; + +const CircularProgressBar = (props) => { + const { percentage } = props; + const radius = 90; + const circumference = 2 * Math.PI * radius; + + const normalizedPercentage = Math.max(0, Math.min(percentage, 100)); + + const strokeDashoffset = ((100 - normalizedPercentage) / 100) * circumference; + + const isApproachingLimit = percentage > 80; + const isOverLimit = percentage >= 100; + + return ( + + + + {isApproachingLimit && !isOverLimit && ( + + )} + {isOverLimit && ( + + )} + + ); +}; + +/** + * Counter + * + * @description display character count and limit. + * + * @returns + */ +const Counter = forwardRef((props, ref) => { + const { count, limit } = props; + const percentage = (count / limit) * 100; + return ( + limit, + })} + {...props} + ref={ref} + > +
+ {count} /{' '} + {limit} +
+ + + ); +}); + +CircularProgressBar.propTypes = { + percentage: PropTypes.number.isRequired, +}; + +export { CircularProgressBar, Counter }; diff --git a/components/index.js b/components/index.js index efb26ca9..bc62984d 100644 --- a/components/index.js +++ b/components/index.js @@ -12,9 +12,5 @@ export { Repeater } from './repeater'; export { Link } from './link'; export { MediaToolbar } from './media-toolbar'; export { Image } from './image'; -export { - RichTextCharacterLimit, - getCharacterCount, - CircularProgressBar, - Counter, -} from './rich-text-character-limit'; +export { RichTextCharacterLimit, getCharacterCount } from './rich-text-character-limit'; +export { CircularProgressBar, Counter } from './counter'; diff --git a/components/rich-text-character-limit/index.js b/components/rich-text-character-limit/index.js index 91454107..27c5fef1 100644 --- a/components/rich-text-character-limit/index.js +++ b/components/rich-text-character-limit/index.js @@ -1,10 +1,9 @@ -import cx from 'classnames'; -import { useState, useEffect, forwardRef } from '@wordpress/element'; +import { useState, useEffect } from '@wordpress/element'; import { RichText, useBlockEditContext } from '@wordpress/block-editor'; import { create, remove, getTextContent, toHTMLString } from '@wordpress/rich-text'; -import PropTypes from 'prop-types'; import { useFloating, autoUpdate } from '@floating-ui/react-dom'; -import styled from '@emotion/styled'; +import PropTypes from 'prop-types'; +import { Counter } from '../counter'; /** * Get Character Count @@ -23,119 +22,6 @@ const getCharacterCount = (str) => { return textContent.length; }; -/** - * Counter - * - * @description display character count and limit. - * - * @returns - */ -const Counter = forwardRef((props, ref) => { - const { count, limit } = props; - const percentage = (count / limit) * 100; - return ( - limit, - })} - {...props} - ref={ref} - > -
- {count} /{' '} - {limit} -
- - - ); -}); - -const StyledSvg = styled('svg')` - transform: rotate(-90deg); - - & circle { - transition: stroke-dashoffset 0.3s linear; - stroke: currentColor; - stroke-width: 1em; - opacity: 0.3; - } - - & path { - fill: currentColor; - } - - & .bar { - stroke: currentColor; - opacity: 1; - } -`; - -const StyledCounter = styled('div')` - display: flex; - align-items: center; - justify-content: center; - gap: 0.5em; - font-variant-numeric: tabular-nums; -`; - -const CircularProgressBar = (props) => { - const { percentage } = props; - const radius = 90; - const circumference = 2 * Math.PI * radius; - - const normalizedPercentage = Math.max(0, Math.min(percentage, 100)); - - const strokeDashoffset = ((100 - normalizedPercentage) / 100) * circumference; - - const isApproachingLimit = percentage > 80; - const isOverLimit = percentage >= 100; - - return ( - - - - {isApproachingLimit && !isOverLimit && ( - - )} - {isOverLimit && ( - - )} - - ); -}; - /** * Rich Text Character Limit * @@ -231,7 +117,7 @@ const RichTextCharacterLimit = (props) => { ); }; -export { RichTextCharacterLimit, getCharacterCount, CircularProgressBar, Counter }; +export { RichTextCharacterLimit, getCharacterCount }; RichTextCharacterLimit.defaultProps = { limit: 100, @@ -244,7 +130,3 @@ RichTextCharacterLimit.propTypes = { value: PropTypes.string.isRequired, onChange: PropTypes.func.isRequired, }; - -CircularProgressBar.propTypes = { - percentage: PropTypes.number.isRequired, -}; diff --git a/example/src/blocks/rich-text-character-limit/index.js b/example/src/blocks/rich-text-character-limit/index.js index 72e64a63..e3cb71b9 100644 --- a/example/src/blocks/rich-text-character-limit/index.js +++ b/example/src/blocks/rich-text-character-limit/index.js @@ -1,7 +1,7 @@ import { registerBlockType } from '@wordpress/blocks'; import { __ } from '@wordpress/i18n'; import { useBlockProps } from '@wordpress/block-editor'; -import { RichTextCharacterLimit } from '@10up/block-components'; +import { RichTextCharacterLimit } from '../../../../components/rich-text-character-limit'; const NAMESPACE = 'example'; From 46c5d2a14132b12302bc6302f78a5dbf530473ac Mon Sep 17 00:00:00 2001 From: Siddharth Thevaril Date: Sun, 16 Oct 2022 13:29:38 +0530 Subject: [PATCH 2/3] fix warning SVG color --- components/counter/index.js | 65 ++++++++++++++++++++++++++++++++----- 1 file changed, 56 insertions(+), 9 deletions(-) diff --git a/components/counter/index.js b/components/counter/index.js index 9401d7ae..8ce58329 100644 --- a/components/counter/index.js +++ b/components/counter/index.js @@ -14,13 +14,37 @@ const StyledSvg = styled('svg')` } & path { - fill: currentColor; + fill: #46b450; } & .bar { - stroke: currentColor; + stroke: #46b450; opacity: 1; } + + &.tenup--block-components__circular-progress { + &.is-over-limit { + & path { + fill: #dc3232; + } + + & .bar { + stroke: #dc3232; + opacity: 1; + } + } + + &.is-approaching-limit { + & path { + fill: #ffb900; + } + + & .bar { + stroke: #ffb900; + opacity: 1; + } + } + } `; const StyledCounter = styled('div')` @@ -50,6 +74,10 @@ const CircularProgressBar = (props) => { height="20" viewBox="0 0 200 200" version="1.1" + className={cx('tenup--block-components__circular-progress', { + 'is-over-limit': isOverLimit, + 'is-approaching-limit': isApproachingLimit && !isOverLimit, + })} > { strokeDashoffset={strokeDashoffset} /> {isApproachingLimit && !isOverLimit && ( - + <> + + + + )} {isOverLimit && ( Date: Mon, 21 Nov 2022 13:01:55 +0530 Subject: [PATCH 3/3] fix import --- example/src/blocks/rich-text-character-limit/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/example/src/blocks/rich-text-character-limit/index.js b/example/src/blocks/rich-text-character-limit/index.js index e3cb71b9..72e64a63 100644 --- a/example/src/blocks/rich-text-character-limit/index.js +++ b/example/src/blocks/rich-text-character-limit/index.js @@ -1,7 +1,7 @@ import { registerBlockType } from '@wordpress/blocks'; import { __ } from '@wordpress/i18n'; import { useBlockProps } from '@wordpress/block-editor'; -import { RichTextCharacterLimit } from '../../../../components/rich-text-character-limit'; +import { RichTextCharacterLimit } from '@10up/block-components'; const NAMESPACE = 'example';