SHARE
TWEET

Untitled

a guest Jul 16th, 2019 61 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. import * as React from "react"
  2. import { PropertyControls, ControlType } from "framer"
  3.  
  4. const style: React.CSSProperties = {
  5.     height: "100%",
  6.     display: "flex",
  7.     alignItems: "center",
  8.     justifyContent: "center",
  9.     textAlign: "center",
  10.     color: "#FFF",
  11.     overflow: "hidden",
  12. }
  13.  
  14. interface Props {
  15.     value: string
  16. }
  17.  
  18. interface States {
  19.     inputValue: string
  20. }
  21.  
  22. export class Input extends React.Component<Props> {
  23.     static defaultProps = {
  24.         value: "",
  25.     }
  26.  
  27.     static propertyControls: PropertyControls = {
  28.         value: { type: ControlType.String, title: "Text" },
  29.     }
  30.  
  31.     state = {
  32.         value: this.props.value,
  33.     }
  34.  
  35.     handleInputValue(e) {
  36.         this.setState({
  37.             value: e.target.value,
  38.         })
  39.     }
  40.  
  41.     componentWillReceiveProps(props: Props) {
  42.         if (props.value !== this.props.value) {
  43.             this.setState({ value: props.value })
  44.         }
  45.     }
  46.  
  47.     render() {
  48.         return (
  49.             <div>
  50.                 <input
  51.                     value={this.state.value}
  52.                     onChange={e => this.handleInputValue(e)}
  53.                 />
  54.                 <h1>{this.state.value}</h1>
  55.             </div>
  56.         )
  57.     }
  58. }
  59.  
  60. export default Input
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
 
Top