Просмотр исходного кода

Enable save button to clear position styles

jnfrati 4 лет назад
Родитель
Сommit
c28f87b36a
1 измененных файлов с 19 добавлено и 6 удалено
  1. 19 6
      dashboard/src/components/SaveButton.tsx

+ 19 - 6
dashboard/src/components/SaveButton.tsx

@@ -12,6 +12,7 @@ type PropsType = {
 
   // Makes flush with corner if not within a modal
   makeFlush?: boolean;
+  clearPosition?: boolean;
 };
 
 type StateType = {};
@@ -57,7 +58,10 @@ export default class SaveButton extends Component<PropsType, StateType> {
 
   render() {
     return (
-      <ButtonWrapper makeFlush={this.props.makeFlush}>
+      <ButtonWrapper
+        makeFlush={this.props.makeFlush}
+        clearPosition={this.props.clearPosition}
+      >
         <div>{this.renderStatus()}</div>
         <Button
           disabled={this.props.disabled}
@@ -122,19 +126,28 @@ const StatusWrapper = styled.div`
 `;
 
 const ButtonWrapper = styled.div`
-  display: flex;
-  align-items: center;
-  position: absolute;
-  justify-content: flex-end;
-  ${(props: { makeFlush: boolean }) => {
+  ${(props: { makeFlush: boolean; clearPosition?: boolean }) => {
+    if (props.clearPosition) {
+      return "";
+    }
+
+    const baseStyles = `
+      display: flex;
+      align-items: center;
+      position: absolute;
+      justify-content: flex-end;
+    `;
+
     if (!props.makeFlush) {
       return `
+        ${baseStyles}
         bottom: 25px;
         right: 27px;
         left: 27px;
       `;
     }
     return `
+      ${baseStyles}
       bottom: 5px;
       right: 0;
     `;