Advertisement
Guest User

Untitled

a guest
Jul 16th, 2019
80
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 1.19 KB | None | 0 0
  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
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement