forked from uber/baseweb
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
* feat(button-timer): sketch out basic component * chore(button-timed): add index.js.flow * fix(button-timed): fix undefined overrides * fix(button-timed): button fill speed * chore(button-timed): handle button state after click * chore(button-timed): add docs * chore(button-timed): improve post-countdown styles * chore(button-timed): add e2e tests * chore(button-timed): extract out timeRemaining state management * chore(button-timed): fix overrides implementation * feat(button-timed): implement pause function * chore(button-timed): extract out use-paused * chore(button-timed): extract out utils * chore(button-timed): remove stateless version of component * chore(button-timed): smooth out animation * chore(button-timed): update docs * chore(button-timed): fix merged overrides * test(vrt): update visual snapshots for 39e11cf [skip ci] (uber#5161) Co-authored-by: UberOpenSourceBot <[email protected]> * chore(button-timed): move // @flow to top of file * chore(button-timed): fix flow types * chore(button-timed): fix test issue * chore(button-timed): add more unit tests * chore(button-timed): use jest fake timers * chore(button-timed): fix syntax for jest fake timers * chore(button-timed): comment out failing unit test * chore(button-timed): delete failing unit tests file * chore(button-timed): add integration test * test(vrt): update visual snapshots for d0eb440 [skip ci] (uber#5190) Co-authored-by: UberOpenSourceBot <[email protected]> Co-authored-by: UberOpenSourceBot <[email protected]> Co-authored-by: UberOpenSourceBot <[email protected]>
- Loading branch information
3 people
authored
Oct 6, 2022
1 parent
6a4890f
commit 71655c0
Showing
24 changed files
with
772 additions
and
36 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
116 changes: 116 additions & 0 deletions
116
documentation-site/components/yard/config/button-timed.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,116 @@ | ||
| /* | ||
| Copyright (c) Uber Technologies, Inc. | ||
| This source code is licensed under the MIT license found in the | ||
| LICENSE file in the root directory of this source tree. | ||
| */ | ||
| import { ButtonTimed } from 'baseui/button-timed'; | ||
| import { PropTypes } from 'react-view'; | ||
| import type { TConfig } from '../types'; | ||
|
|
||
| const ButtonTimedConfig: TConfig = { | ||
| componentName: 'ButtonTimed', | ||
| imports: { | ||
| 'baseui/button-timed': { | ||
| named: ['ButtonTimed'], | ||
| }, | ||
| }, | ||
| scope: { | ||
| ButtonTimed, | ||
| }, | ||
| theme: [ | ||
| 'buttonPrimaryFill', | ||
| 'buttonPrimaryText', | ||
| 'buttonPrimaryHover', | ||
| 'buttonPrimaryActive', | ||
| 'buttonSecondaryFill', | ||
| 'buttonSecondaryText', | ||
| 'buttonSecondaryHover', | ||
| 'buttonSecondaryActive', | ||
| 'buttonTertiaryFill', | ||
| 'buttonTertiaryText', | ||
| 'buttonTertiaryHover', | ||
| 'buttonTertiaryActive', | ||
| 'buttonTertiarySelectedFill', | ||
| 'buttonTertiarySelectedText', | ||
| 'buttonMinimalFill', | ||
| 'buttonMinimalText', | ||
| 'buttonMinimalHover', | ||
| 'buttonMinimalActive', | ||
| 'buttonDisabledFill', | ||
| 'buttonDisabledText', | ||
| ], | ||
| props: { | ||
| children: { | ||
| value: 'Label', | ||
| type: PropTypes.ReactNode, | ||
| description: `Visible label.`, | ||
| }, | ||
| onClick: { | ||
| value: '() => alert("click")', | ||
| type: PropTypes.Function, | ||
| description: `Function called when time runs out or button is clicked.`, | ||
| }, | ||
| initialTime: { | ||
| value: 15, | ||
| type: PropTypes.Number, | ||
| description: `Number of seconds before onClick is automatically invoked`, | ||
| }, | ||
| startEnhancer: { | ||
| value: undefined, | ||
| placeholder: '() => <span>🦊</span>', | ||
| type: PropTypes.Function, | ||
| description: `A component rendered at the start of the button.`, | ||
| hidden: true, | ||
| }, | ||
| endEnhancer: { | ||
| value: undefined, | ||
| placeholder: '<i>world!</i>', | ||
| type: PropTypes.Function, | ||
| description: `A component rendered at the end of the button.`, | ||
| hidden: true, | ||
| }, | ||
| disabled: { | ||
| value: false, | ||
| type: PropTypes.Boolean, | ||
| description: 'Indicates that the button is disabled', | ||
| hidden: true, | ||
| }, | ||
| colors: { | ||
| value: undefined, | ||
| defaultValue: '{backgroundColor: "#03703c", color: "white"}', | ||
| type: PropTypes.Object, | ||
| description: 'Lets you customize the background and text color.', | ||
| hidden: true, | ||
| }, | ||
| isLoading: { | ||
| value: false, | ||
| type: PropTypes.Boolean, | ||
| description: 'Show loading button style and spinner.', | ||
| hidden: true, | ||
| }, | ||
| isSelected: { | ||
| value: false, | ||
| type: PropTypes.Boolean, | ||
| description: 'Indicates that the button is selected.', | ||
| hidden: true, | ||
| }, | ||
| overrides: { | ||
| value: undefined, | ||
| type: PropTypes.Custom, | ||
| description: 'Lets you customize all aspects of the component.', | ||
| custom: { | ||
| names: [ | ||
| 'BaseButtonTimed', | ||
| 'TimerContainer', | ||
| 'EndEnhancer', | ||
| 'LoadingSpinner', | ||
| 'LoadingSpinnerContainer', | ||
| 'StartEnhancer', | ||
| ], | ||
| }, | ||
| }, | ||
| }, | ||
| }; | ||
|
|
||
| export default ButtonTimedConfig; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,91 @@ | ||
| // @flow | ||
| /* | ||
| Copyright (c) Uber Technologies, Inc. | ||
| This source code is licensed under the MIT license found in the | ||
| LICENSE file in the root directory of this source tree. | ||
| */ | ||
| import * as React from 'react'; | ||
|
|
||
| import {ButtonTimed} from 'baseui/button-timed'; | ||
| import {Button, KIND} from 'baseui/button'; | ||
|
|
||
| export default function Example() { | ||
| const [finished1, setFinished1] = React.useState(false); | ||
| const [finished2, setFinished2] = React.useState(false); | ||
| const [finished3, setFinished3] = React.useState(false); | ||
| const [finished4, setFinished4] = React.useState(false); | ||
|
|
||
| const [paused, setPaused] = React.useState(true); | ||
|
|
||
| return ( | ||
| <div> | ||
| <Button | ||
| kind={KIND.secondary} | ||
| onClick={() => setPaused(!paused)} | ||
| > | ||
| {paused ? 'Run' : 'Pause'} | ||
| </Button> | ||
|
|
||
| <div> | ||
| <ButtonTimed | ||
| onClick={() => setFinished1(true)} | ||
| initialTime={10} | ||
| paused={paused} | ||
| > | ||
| Countdown | ||
| </ButtonTimed> | ||
| {finished1 && ( | ||
| <span style={{marginLeft: '20px', color: 'red'}}> | ||
| Time! | ||
| </span> | ||
| )} | ||
| </div> | ||
|
|
||
| <div> | ||
| <ButtonTimed | ||
| onClick={() => setFinished2(true)} | ||
| initialTime={18} | ||
| paused={paused} | ||
| > | ||
| Countdown | ||
| </ButtonTimed> | ||
| {finished2 && ( | ||
| <span style={{marginLeft: '20px', color: 'blue'}}> | ||
| Time! | ||
| </span> | ||
| )} | ||
| </div> | ||
|
|
||
| <div> | ||
| <ButtonTimed | ||
| onClick={() => setFinished3(true)} | ||
| initialTime={35} | ||
| paused={paused} | ||
| > | ||
| Countdown | ||
| </ButtonTimed> | ||
| {finished3 && ( | ||
| <span style={{marginLeft: '20px', color: 'gold'}}> | ||
| Time! | ||
| </span> | ||
| )} | ||
| </div> | ||
|
|
||
| <div> | ||
| <ButtonTimed | ||
| onClick={() => setFinished4(true)} | ||
| initialTime={60} | ||
| paused={paused} | ||
| > | ||
| Countdown | ||
| </ButtonTimed> | ||
| {finished4 && ( | ||
| <span style={{marginLeft: '20px', color: 'green'}}> | ||
| Time! | ||
| </span> | ||
| )} | ||
| </div> | ||
| </div> | ||
| ); | ||
| } |
Oops, something went wrong.